Check as complete
Many people use only the keyboard to navigate a website. Tabbing order should be logical so that keyboard users can sequentially navigate and use every interactive element on a page.
Check your tabbing order
Check the tab order of your page by pressing the “Tab” key repeatedly to navigate through all interactive elements. You might notice elements get activated out of order, or that tabbing jumps you around the page.
When your tab order is illogical or nonlinear, consider the following:
- Position elements in the DOM (Document Object Model) rather than visually positioning them with CSS properties. (Focus order is determined by the DOM and will often be nonlinear or illogical if we use CSS instead of the Navigator to arrange them.)
- Group like content using the List element.
- Match focus order with the visual layout. (Usually, this means linear, from left to right and top to bottom, but it depends on your page’s layout.)
WCAG reference:
Back to checklist
Total progress
Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
0 / 0
Hide progress