Focus – Reading & Tabbing Order
What is Focus?
When we talk about focus, we are referring to the currently selected element in a graphical user interface, known as a GUI. This might be a link we have used the tab key to move to or an interactive element on a website we have clicked.
Web Content Accessibility Guideline 2.4.7: Focus Visible
The purpose of this success criterion is to help a person know which element has the keyboard focus. Focus Visible is a level A guideline, meaning a website must implement it in order to meet basic digital accessibility.
Focus indicators must highlight or bring attention to the element that is currently active, which in turn allows someone to easily locate where keyboard focus is and monitor its movement as they navigate a website.
What is Reading Order?
Reading order is the order in which all elements of the webpage are a part of, including text, headings, menus, edit fields, links and buttons.
Because screen readers follow this order, it must be logical. As a rule of thumb, web developers want reading order to replicate the way the eye moves through a website so screen reader users get the same experience.
Great care is often taken in user interface (UI) layout to give the best user experience (UX), and if the reading order is correct, UI design can also benefit screen reader users. When this is not the case and screen readers are presented information in the wrong order, using a website becomes very difficult or confusing.
What is Tabbing Order?
Tabbing order refers to the order in which a user cycles through elements when pressing the tab key. This order only deals with interactive elements such as buttons, links, and edit fields; textual and graphical information that has been marked as background elements are bypassed.
This order is extremely important for quick navigation in forms to allow a user to complete them more efficiently. Care must be taken from a UI/UX point when building forms to not place textual information such as password creation instructions between edit fields, because if a screen reader user is tabbing through a form, they can potentially tab past password instructions and encounter a bad user experience when they can’t complete the form because their input does not meet the password criteria.
How Can IA Labs help?
As part of our consultations, accessibility audits, and training sessions, we can identify and explain all the contextual nuances that would apply to focus issues and WCAG 2.1 compliance in this area.
If you have any questions or need any help with any digital accessibility issue, please don’t hesitate to make contact with IA Labs.
