Focus Management

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

Using Tabindex

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.