WCAG Principle: Operable
Guideline 2.4: Navigable (Provide ways to help users navigate, find content, and determine where they are)
Conformance Level: A (Minimal Requirement)
What is Success Criterion 2.4.3?
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
Many browsers use the “tab” key to navigate interactive elements such as links, form controls, and widgets on a website. This success criterion requires when these elements receive focus, it must follow a logical order. Think of it like reading a book – you go from left to right, top to bottom. The same idea applies when moving around a webpage with the ‘tab’ key.
How does it make your website accessible?
Different people use websites in different ways. Some use screen readers that follow a specific order set by the website’s code, while others use the visual layout of the webpage. Both these users should be able to understand and navigate the website easily.
So, if something on the page looks like it should be the first thing a user interacts with, it should also be the first thing that gets focus when using the ‘Tab’ key. This makes the website more user-friendly, creating a better and more engaging experience for everyone.
Who benefits from a logical focus order?
- Blind and visually impaired users who rely on screen readers or screen magnifiers
- People with mobility impairments who rely on keyboard access to operate web pages
- People with disabilities that make reading difficult.
How to Meet Success Criterion 2.4.3
Common mistakes on websites:
- The visual order of elements does not match their order in the DOM (Document Object Model). This often happens when developers use CSS to visually reposition interactive elements.
- Use of the wrong Tabindex values. Elements with tabindex greater than 0 will take priority in the focus order, which could disrupt the natural logical flow.
- Lack of focus on interactive elements in the keyboard navigation order.
- Over-dependence on JavaScript to control focus.
How to fix mistakes:
- Align the DOM order with the visual order of elements on the page.
- Avoid using CSS to rearrange interactive elements as it can confuse keyboard users.
- Use tabindex=”0″ for elements that need to be focusable but are not by default, or tabindex=”-1″ for elements that need to be programmatically focused. Avoid using a tabindex greater than “0”.
- Make sure all interactive elements, like links and form inputs, are focusable and included in the tab order.
- Follow the natural HTML and DOM order for primary focus, and only use JavaScript when necessary, like for complex widgets or modal dialogs.
Helpful tips for developers:
- Use landmarks and regions to group related elements. This can help provide a structural roadmap for the user and assist with navigating large pages.
- Adding ‘skip links’ at the start of the page is a good practice. These allow users to skip directly to the main content and bypass blocks of repetitive content.
- Try to keep your page layout simple and intuitive. A complex design may confuse users, even if the focus order is correct.
How to test if your website meets the focus order criterion:
- Unplug your mouse and use the keyboard to navigate through the website. Use the ‘Tab’ key to move forward, ‘Shift+Tab’ to move backward, and ‘Enter’ to select.
- Check that the navigation is logical and predictable, and follows the visual order of the webpage.
- While tabbing through elements, ensure that a visible focus indicator (like a border or background color change) appears on the currently focused element.
- If the webpage loads content dynamically, ensure that the new content fits logically into the focus order. This might involve manually setting the focus to the new content when it loads.
If all checks are true, then your website conforms with this success criterion.
Bad and Good Examples of Focus Order (Code Snippets)
Code example that fails success criterion 2.4.3
Code Snippet
<div style="display:flex; flex-direction:row-reverse;">
<button id="submitForm">Submit Form</button>
<button id="fillDetails">Fill Details</button>
</div>In this example, the visual order shows “Fill Details” before “Submit Form” due to the flex-direction:row-reverse CSS property. However, in the Document Object Model (DOM) order, which keyboard and screen reader users rely on, “Submit Form” comes before “Fill Details”.
This mismatch can confuse users, as they’d naturally expect to fill in the details before submitting the form based on the visual layout. So, when they encounter the “Submit Form” button before “Fill Details” using keyboard navigation or a screen reader, it goes against the expected sequence of actions.
Code example that meets success criterion 2.4.3
Code Snippet
<div>
<button id="viewCart">View Cart</button>
<button id="checkout">Checkout</button>
<button id="payment">Make Payment</button>
</div>In this other example, the buttons appear in a logical sequence both visually and in the DOM structure. An online shopper would normally view their cart first, then proceed to the checkout, and finally make a payment. This code reflects that order, creating a clear sequence that aligns with the user’s expected workflow.
That means whether a user navigates this webpage visually, uses keyboard navigation or relies on a screen reader access, they will encounter these buttons in the same expected order. This meets the requirements of Success Criterion 2.4.3 by providing a consistent and predictable experience.
Frequently Asked Questions
What is website focus?
Website focus is the active state of an element, like a link or button, that a user is currently interacting with. This focus state is visually highlighted to show the user which element is currently active and ready to receive focus. Website focus is especially crucial for keyboard and screen reader users.
What is the difference between reading order and focus order?
The difference between reading order and focus order lies in how content is presented and navigated. Reading order is the sequence in which a user reads content visually or via assistive technologies like screen readers. It is guided by the page’s structure and visual organization.
Focus order, on the other hand, is the order in which interactive elements (like links or buttons) receive focus when a user navigates using a keyboard. For an intuitive user experience, focus order should match the logical reading order.
What is the difference between meaningful sequence and focus order?
The two concepts are related (a logical focus order often follows a meaningful sequence of content) but not the same. Meaningful sequence usually applies to the whole content, whereas focus order is specifically about the sequence of interactive elements.
Which components must receive focus in an order that preserves meaning and operability?
Components which must receive focus in an order that preserves meaning and operability include interactive elements such as links, buttons, form inputs and widgets. Others are:
- Navigation components (such as menus, link lists, search fields, etc.)
- Dynamic elements (such as modal windows, popup menus)
- Complex content structures (such as tree views or carousels in data tables).
