The focus order is logical and intuitive

Design Notes

Design an intuitive keyboard interaction

When people read through a page using a keyboard, the page content should be displayed in an order which makes sense. Make sure that interactive controls such as: links, buttons and form controls are designed so they receive focus in logical order.

Generally speaking, items should receive focus in a left-right, top-bottom order, across screens and devices. When dynamic content appears on the page focus either needs to move to the new content (such as a modal dialog or an error summary) or the new content should be announced (such a single error message or toast) or information about the new content should be announced (such as autocomplete and search results).

Designers and developers should collaborate to ensure coded pages produce an intuitive focus order.

Developer Notes

Ensure the focus order makes sense

Make sure that interactive controls such as: links, buttons and form controls receive focus in logical order. Ensure:

• the visual order for tabbing progress is left-to-right and top-to-bottom - interactive controls should be in a logical in the source code and not use a positive tabindex
• the focus does not move to hidden elements - either make the hidden element appear when it receives focus (such as a skip link) or ensure that the element does not receive focus by using either display:none or the hidden attribute
• you cannot tab to non-functional elements (such as headings, paragraphs and table cells) - do not add tabindex="0" to elements that should not be interactive

When there is a form error on a page move focus either to an error summary at the top of the page (which links to the fields that are in error) or move focus directly to the first field that has an error

When providing dynamic content in modal dialogs ensure that keyboard focus moves to the dialog by using HTMLElement.focus() and return the focus to the triggering element when the dialog is closed.

When building a single page application and activating a link change the pages content, ensure that focus does not remain on the link, but instead moves to the new page content.

When new content is loaded above a button ensure that focus is moved to that content automatically.

More information

• Introduction to Focus
• DOM Order Matters
• Using tabindex
• An accessible routing pattern

Testing Notes

The sequence of content makes sense

Make sure that interactive controls such as: links, buttons and form controls receive focus in logical order.

• the visual order for tabbing progress is left-to-right and top-to-bottom
• the focus does not move to hidden elements
• you cannot tab to non-functional elements (such as headings, paragraphs and table cells)

Steps to check

• place cursor in the browser address bar
• use the keyboard Tab key to progress through interactive page elements (e.g. links, buttons, form inputs) until you reach the end of the document
• does focus move from element to element in a logical and predictable order?
• repeat the process and activate interactive elements such as buttons and tabs that show and hide content (using Enter, Spacebar, or arrow keys as appropriate)
• when content is added or removed , navigate through the content
• does the focus order makes sense?

Impact range: Low - High

Test type: Manual (with some support from tools)

Tool: ARC Toolkit (Tab order, Show and track focus)

WCAG Reference: Understanding Success Criterion 2.4.3 Focus Order