Accessibility Checklist: Focus Order
Bobby Bailey
How to Ensure a Logical and Usable Focus Order
A well-structured focus order ensures that people navigating with a keyboard or assistive technology can move through content logically. Poor focus order can confuse users and make navigation difficult. Use this checklist to ensure focus is properly managed.
10-Point Accessible Focus Order Checklist
Number one: Ensure focus moves in a logical sequence
Focus navigation should follow a left-to-right, top-to-bottom order. The Tab key should move through content in a way that makes sense visually and functionally.
Number two: Avoid skipping focusable elements
Every interactive element (links, buttons, form fields) must be reachable with the Tab key. Hidden or off-screen elements should not receive focus unexpectedly.
Number three: Ensure modal dialogs trap focus when open
When a modal opens, focus should move inside it, preventing people from tabbing outside. Pressing Esc should close the modal and return focus to the triggering element.
Number four: Do not override natural focus order unnecessarily
Avoid using tabindex values greater than 0 unless absolutely necessary. Custom focus orders should maintain logical navigation.
Number five: Ensure newly loaded content receives focus when appropriate
When adding dynamic content (e.g., a success message), place focus on the new content if needed. After submitting a form, focus should move to a confirmation message rather than resetting to the top of the page.
Number six: Prevent focus from landing on hidden elements
Do not allow focus on elements hidden with display: none; or visibility: hidden;. Use aria-hidden="true" to hide content from assistive technologies when necessary.
Number seven: Ensure keyboard users can easily skip repetitive content
Provide a "Skip to Main Content" link at the top of the page. This link should become visible when focused and allow people to bypass repeated navigation elements.
Number eight: Keep focus inside interactive widgets when necessary
In carousels, menus, and popups, focus should stay within the component until the person closes it. The Tab key should not exit the component prematurely.
Number nine: Restore focus to the correct element when closing dialogs
When closing a modal or popup, focus should return to the button or link that triggered it rather than resetting to the top of the page.
Number ten: Test focus order with a keyboard
Unplug the mouse and navigate the site using only the Tab, Shift + Tab, and Enter keys. Confirm that focus moves smoothly and logically through all interactive elements.