Understanding WCAG SC 3.2.1 On Focus
3.2.1 On Focus
3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)
On Focus Transcript
Hello everyone. Today we’re going to talk about context change on focus. We are also going to discuss its importance, the benefits, some good practices, failure scenarios, and how we can fix them.When users tab through a web page and focus on a UI control, the focus must not automatically initiate any context change. But what is context change? Well, it refers to a shift in keyboard focus to any location of the web page. This can also mean initiating any unnecessary form submission or any other action the user has not intended to perform. For example, a user taps the submit button in an online form without user interaction by means of pressing Enter, the space bar, or any other keystroke. This causes the keyboard focus to submit the form, and the page changes entirely.
But why is it important, and who benefits from this? It helps users with no vision or limited vision use a keyboard and screen readers. It assists users with limited mobility who heavily rely on a keyboard or alternative input mechanism other than a mouse. It also benefits users with cognitive disabilities who expect predictability while operating a web page.
Now let’s see some examples of good practices. A good example is a drop-down that opens on pressing the down arrow on the keyboard. It allows users to navigate within the options, and pressing the Escape key closes the drop-down while keeping the focus on it. Similarly, in an online form, a date of birth field is available with a calendar icon button next to the field, which is accessible by keyboard only. Upon activating the calendar icon button, the calendar widget opens. Pressing the Escape key closes the calendar widget, returning the focus back to the calendar icon button. In an online payment page, context-sensitive help dialogues open only upon activating the help icon button whenever they are required.
Unfortunately, there are some failure scenarios. On a user profile web page, there are options like delete for each user’s data. Whenever the user focuses on the delete button, a dialogue pops up asking, “Are you sure you want to delete this?” Another example is in an online payment page where every time a user tabs to the credit card field, a help dialogue opens, and the keyboard focus moves to the dialogue away from the field. This prevents the user from filling in the credit card number.
Now let’s see how we can fix these issues. It’s important to ensure that UI controls do not initiate any user interaction, like form submission, on focus event handlers. It’s also crucial to ensure that the keyboard focus does not jump around the page when UI elements receive tab focus. Ensure that additional content, such as help dialogues, tooltips, modal popups, and new windows, are triggered only when the user activates such trigger icon controls with Enter, space bar, or custom shortcuts, and not on focus.
In conclusion, context change can have a significant impact on the user experience for users with disabilities. By following good practices and fixing any failure scenarios, you can ensure a positive and accessible experience for all users.
This is the end of the video. Thank you for joining. If you like the video, do like and subscribe.
The intent of this success criterion is to make sure that any unwanted actions are not initiated when focus moves on to an element. For example during tab navigation or shift tab navigation if user focus moves on to a link & a modal is triggered this fails this check point. Here user did not initiate this action; it was initiated when user focus moved on to a particular element. If the website is built using HTML & CSS purely, we will not encounter such behavior. This behavior is seen a lot on websites built with fancy scripting where the developers have no knowledge about accessibility. We must also take mouse users into consideration while testing for this checkpoint; while mouse pointer moves onto elements no actions should be initiated.
Ensure that:
- Links don’t open new page or new window when focused with mouse or keyboard.
- Forms don’t submit automatically.
- There are no pop-ups or modal windows opening on pageload or focusing on an element.
- Focus should not move automatically to another element where it disorients the users.
