The attribute autofocus

With the attribute autofocus added to a focusable HTML element, the element will automatically receive focus after a webpage loads. Focus can be set programmatically using JS, for example by using the focus() method.

This overrides the natural order of visual and keyboard focus and can be confusing for keyboard and screen reader users.

The screen reader will not announce anything before the element that gets autofocus, and sighted users on small devices will miss the context set by the preceding content. MDN on autofocus.

Do not make decisions for your users on how to read or operate a web page. Make the visible and keyboard focus predictable and sequential.

The only possible accessible use for the attribute autofocus can be by moving the focus after opening a <dialog>.

How to test for autofocus

Load a web page and verify that keyboard and visible focus is not automatically set, either by using the autofocus attribute or by assignment using JavaScript.

Examples

Don’t: add autofocus to a form field. Not everyone may want to fill out the form, maybe they want to user the main menu or read content above the form.

<!-- do not copy, this is not accessible and user-friendly -->
<label for="first-name">First name</label>
<input id='first-name" autofocus autocomplete="given-name" >

Do: leave the natural visual and keyboard focus order of a web page intact.

<label for="first-name">First name</label>
<input id="first-name" autocomplete="given-name" >

Resources

WCAG Success Criteria for focus order

Maintaining a meaningful and predictable focus order is necessary to meet the WCAG success criteria:

Other resources