Understanding Success Criterion 3.2.1: On Focus

Understanding Success Criterion 3.2.1 On Focus

The purpose of this success criterion is to make sure that functionality is predictable as users navigate through a website’s content. Any element that can trigger an event when it receives focus should not change the context.

Official Requirements

Success Criterion 3.2.1 On Focus (Level A): When any user interface component receives focus, it does not initiate a change of context.

Why is it required?

All users require predictability when they navigate through any website. If components do not act as they expect/guess, they may become confused.

To be precise, once a component receives focus from a user, whether with a mouse or keyboard, the component should not automatically change (also known as ‘changing on focus’). This will confuse the users.

This is especially problematic for users with low or no vision and people with motor impairments who are prevented from using a mouse for navigation.

How do we fix it?

1. Avoid modifications that are visual and behavioral in nature

2. Make sure no element changes just by receiving focus

3. Ensure that links do not open automatically on focus

4. Make sure forms don’t get submitted without the user taking an action on it (like clicking the ‘Submit’ button)

5. Make sure there are no automatic pop-ups

6. Ensure that focus never changes to another element automatically

7. Ensure that no other action that occurs on focus alone triggers the page to change.

Exceptions

Elements can change on focus if the context does not change.

Examples of such cases are – 

a. You can use a dynamic menu on your website, the type where options for navigation drop down when you hover over an item. This is not a change of context.

b. Hover status on any given link is also not a change of context.

Picture of Aditya Bikkani

Aditya Bikkani

Aditya is the COO of AELData, a growing technology company in the Digital Publishing and Education sectors. He is also an entrepreneur and founder of an accessibility tool called LERA. A W3C COGA (Cognitive and Learning Disabilities Accessibility) Community Member Aditya contributes to researching methodologies to improve web accessibility and usability for people with cognitive and learning disabilities.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on Social Media

Facebook
Twitter
LinkedIn
Email
Pinterest
Reddit
WhatsApp

Related Blogs

What is AEL Accessibility Checker (AAC)

What is AEL Accessibility Checker (AAC)?

Wondering how Accessible your website is to everyone? With AEL Accessibility Checker (AAC), you can quickly evaluate your web page against automated Accessibility violations.  AAC

How Accessible Is Your Website?

Check your site’s accessibility in few seconds with our FREE accessibility checker. Ensure compliance with ADA & WCAG guidelines and improve user experience across the board.

Skip to content