When you’re developing a website or mobile app, you generally want users to take a certain action — you want them to complete a form, purchase a product, or follow a hyperlink.
It’s tempting to use the HTML autofocus attribute to put your call to action front-and-center. The autofocus attribute indicates that an element should receive focus when the page loads. It’s a boolean attribute (it can only have a “true" or “false" value). Autofocus can also be implemented in other ways — for example, with JavaScript — but simple HTML is usually the best option.
Autofocus can be useful in certain situations, but it’s often overused. This can impact accessibility, particularly for people with vision disabilities and neurocognitive differences.
How Autofocus Affects Accessibility
Let’s say you set up a checkout page to automatically focus on the first form field. The field asks for the user’s name; you believe that automatically focusing on the field will encourage more of your users to complete the process.
But if someone accesses the web page using a screen reader, the software might skip the information that precedes the form field. They might miss the instructions at the top of the form — they’re only presented with the form field’s label. They may not know what information they need to present, and they’re forced to retrace their steps.
Likewise, if a user accesses the page on a mobile device with a small screen, the page may automatically scroll to the form field as soon as it loads. This isn’t great for the user experience (UX), as it makes people feel like they’re “teleporting" past important content.
Put simply, autofocus can give users the impression that they’re not in control of their web browser. From a UX perspective, that’s bad news.
Related: Does WCAG 2.1 Require Responsive Design?
Poor use of autofocus may violate WCAG
The Web Content Accessibility Guidelines (WCAG) are the consensus standards for digital accessibility. WCAG Success Criterion (SC) 2.4.3, “Focus Order,” requires that:
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
If your autofocus skips users past important information, you’re not “preserving meaning and operability.” WCAG SC 2.4.3 is a Level A criterion, which means that all websites must follow the guideline in order to present users with a basic level of accessibility.
Autofocus may also prevent conformance with other WCAG success criteria including WCAG 2.1 SC 1.3.2, “Meaningful Sequence,” which requires that the correct reading sequence can be programmatically determined, and WCAG 2.1 SC 3.2.1, “On Focus,” which prohibits components from initiating a change of context when receiving focus.
Using Autofocus Without Sacrificing Accessibility
The best practice is to avoid autofocus if you have any reservations whatsoever about your implementation. Ask yourself these questions:
-
Is there a single component that all users will focus on when the page loads?
-
Does the component appear at the beginning of the page?
-
Will implementing autofocus improve the user experience?
-
Is the operation of the component unambiguous?
-
Could autofocus cause the page to scroll automatically when viewed on smaller screens?
Your goal is to avoid surprising the user. To that end, you should test your implementation with several devices (and if possible, a screen reader) to make sure that you’re providing a seamless experience.
You should also ensure that the component is fully operable with a keyboard alone (without a mouse). If you’re sending users directly to a keyboard trap, you’re introducing a major accessibility barrier — and keyboard traps are unfortunately common on some websites.
Related: Why Consistency is Important to Accessible Design
When designing your content, think about real-life users
Autofocus can be implemented in an accessible way, but it’s often unnecessary. Many developers use the autofocus attribute to compel their users to take a certain action — and that’s a bad idea.
You should only use autofocus when a component is unambiguously important, and when adding the attribute will improve experiences for all users (regardless of the technologies they use to access your website or app).
By maintaining an accessible mindset, you can avoid many common mistakes that impact your product’s UX. Consider introducing disability UX personas during the planning phase, and before introducing a new feature, think about how it might change the way that assistive technologies present your content.
If you need guidance with specific design or development decisions, we’re here to help. Send us a message to connect with an accessibility expert.
