Tech Notes
Managing focus on a web page is a very common accessibility issue. “Focus,” in this sense, refers to the element on the screen that is currently active or selected. It specifies where the user is currently located on the web page.
Screen readers have a specific key command to tell what the currently focused element is. Moving before and after the element also gives a sense of structure and the element’s order on the page.
Visually, you can tell an element has focus by looking for a ring or highlight around the element. Usually, the focus ring is on input elements. For example, when entering an input field, a different color halo will appear around the input box.
Managing focus is ensuring that the user is able to focus on each element in a meaningful and predictable way or that focus is programmatically moved to a logical location after a request.
Focus Order
The focus order is the order in which a user will navigate a page by moving from one element to another. Visually, many web pages present simultaneous information on a given line. For example, the literal first line of a page may be the first part of a menu, the header title of the page, and then the user account. However, the focus order does not allow such concurrent information to be presented. One element occurs after another.
Focus Order as a Linked List
With focus order, each element must either be before or after another element. Presenting a logical focus order means ensuring that this linked list of elements makes sense. In the example above, presenting the literal first line is not meaningful. All of the menu items should be presented one after the other. The content should then be presented one after the other. Mixing the menu with the content, because it appears visually as the same line, is not a meaningful focus order.
How to Set Focus Order on Web
Focus order on the web is determined by the HTML markup, so the focus order will follow the HTML markup order. For example, an element tag that appears before another element tag will be the same in the focus order (unless otherwise altered programmatically). The markup itself is important because even if something appears visually at the top of the page but is on the bottom of the markup document that element will be last in the focus order. For example, a menu that is the last element of the HTML document but has been visually adjusted to appear at the top of the page using CSS will still appear last to a screen reader user. It is important that the markup matches the intended focus order.
With mobile platforms, there are options to programmatically set focus order or adjust the order in the Integrated Development Environment (IDE). Please check the documentation of your chosen platform for more information.
When to Move Focus
Sometimes it is beneficial to move a user to a different location on the page, such as moving users to the bottom of the page directly to a “Contact Us” form. When moving users around the page, it is a best practice to move the focus and not simply move the scrollbar to the location or similar.
Take care when moving focus. It directly moves the user to that location on the page. The experience of moving focus can be disorienting to users if not performed appropriately. It is best to only do it after a user action that requests a change of context. For example, a button that states “Start Application” could move the user to the application form later on the page through programmatically moving focus.
Moving focus programmatically can also commonly be required on responsive single-page applications that are showing and hiding user interface options and utilizing API calls instead of retrieving a new web page for each function.
Alternatives to Moving Focus
Moving focus can be detrimental to the user experience or worse, if it is not needed. A rule of thumb is to only move focus on the user’s request, like after pressing a button to open a form modal. For other cases, such as updating content or error messages, the use of an aria-live=”polite” region is more appropriate.
An aria-live region will announce changing items on the screen without rerouting focus to the element when set to polite. For example, a status notification would be best set as an aria-live region, so that screen reader users will be briefly told a change occurred, but not be interrupted from their current activity.
Managing focus is a crucial part of ensuring that all users experience web content in a consistent and predictable way. For a blind screen reader user, it would be nearly impossible to make sense of anything or to complete a necessary task if the focus jumps illogically around the page elements. Keep all this in mind when assessing the accessibility of a website or application, ensuring that the focus order is logical, and that you are not changing focus unnecessarily. Your users with disabilities will thank you.
About AFB Talent Lab
The AFB Talent Lab aims to meet the accessibility needs of the tech industry – and millions of people living with disabilities – through a unique combination of hands-on training, mentorship, and consulting services, created and developed by our own digital inclusion experts. To learn more about our internship and apprenticeship programs or our client services, please visit our website at www.afb.org/talentlab.
