Understanding SC 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)

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.

Points to Remember

• Ensure that no element changes by receiving focus.
• We should avoid both visual & behavioral modifications to page.
• A website built using only HTML & CSS will not have on focus by default, one needs to provide this through scripting.
• One way to test this check point is to unplug the mouse & navigate the page using the keyboard.

Exceptions

• Elements can change on focus if the context doesn’t change. For example, you can use a dynamic menu on your website, the kind where navigation options drop down when you hover over an item. This is not a change of context.
• Another example would be a hover status on a link, again, this isn’t a change of context.

References

Understanding Success Criterion 3.2.1