Understanding SC 3.2.1 On Focus

Authored By :Raghavendra Satish Peri Last Updated :May 1, 2023 Understandable, WCAG

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 Ponder

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.

Useful A11Y Resources on Focus

On Focus

References

Understanding Success Criterion 3.2.1

Explore our WCAG Checklist

Related Insights on Accessibility

Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.