Managing focus on a webpage, or in a web application, is important to site visitors who use the keyboard and cannot use a mouse, those who use screen readers, and in some cases, those who have cognitive disabilities. You might want to think of assuring that focus goes where your eyes would typically look. As a simple example, if you implement a "skip to main content" link, you would want to be sure that focus jumps over repetitive navigation to the main content when that link is activated.
Generally, maintaining focus helps users stay oriented and know when they have selected a link, button, or form control that can receive input.
To check that focus management is being maintained as you intend, navigate the page using the tab key, and be sure that focus moves to each item in the tab order, as you expect. In other words, as you tab to each element, be sure that you can see a visible change to it. If necessary, you can make adjustments in the code to modify the tab order, but when possible, it is best to have source order reflect the reading order.
Note that Mac users must change some settings to be able to navigate via keyboard only. for details, see: Keyboard Navigation in Mac Browsers.
Some specific interactions where managing focus is critical include:
- Using CSS that changes the source order
- Entering, navigating, and exiting modal windows
- Handling form errors
- Changing the page after a link or button is activated
- Navigating menus and tree views
Sometimes, you may want to remove an element from the tab order because it is not something a user can activate. Or, particularly when working with a web application where you might have <div>s and/or <span>s that don't offer the functionality that HTML does, you might need to assure that those items are included in the tab order (and give them appropriate keyboard functionality, at the same time). In these circumstances, you'll want to use tabindex. To learn more about how and when to use it, Using the tabindex attribute (from the Paciello Group's blog) is a good place to start.
Styling the Focus Indicator
You may find that designers, or others with whom you are working do not like how the default focus indicator looks. Sometimes, consistency can be important, and focus indicators look different, depending on which browser is in use. If this becomes an issue, explain why focus indication helps users, and emphasize that it is important for focus to remain clearly visible. If you are encouraged to change how focus indicators look, this article, Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators (via Deque's blog), offers some ideas.
Video explanations of Focus Management
- Level Access - Web Accessibility 101: Visual Focus Indication
- Google Chrome Developers - What is Focus? -- A11ycasts #03
- Focus Order: Understanding SC 2.4.3 (from the Web Content Accessibility Guidelines 2.0 supporting documents for understanding success criteria)
- Focus Visible: Unerstanding SC 2.4.7 (from the Web Content Accessibility Guidelines 2.0 supporting documents for understanding success criteria)
- Forms Tutorial (from the Web Accessibility Initiative -- specifically the section on User Notifications)
- Menu Tutorial (via the Web Accessibility Initiative)
- Usable and Accessible Form Validation and Error Recovery (WebAIM)