Comparison of a focus order that goes up to down, left to right (accessible) vs. a random order (inaccessible)
Image description: Accessible vs. inaccessible comparison of an intuitive focus order. Both depict an online form with the following labels and user input: "Street address, 123 Square Street. City, Square City. State, SQ (dropdown arrow). Zip code, 2416256." There are light blue number labels that represent the focus order. In the accessible example, the order goes top to bottom, left to right. In the not accessible example, it goes randomly and out of order.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

It’s important that screen reader and keyboard users experience content in the correct order so that it feels predictable and provides meaning.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.

Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.

Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.

In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.

The order of objects does not only refer to the visual order, but also the programmatic order, which is used by screen reader and keyboard users. If they experience content in an order that is confusing or non-intuitive, this makes the entire experience more confusing.

This references WCAG criteria 1.3.2 Meaningful Sequence (Level A) and 2.4.3 Focus Order (Level A).

Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.

How to Implement This

This page combines 2 separate WCAG criteria because they both relate to an intuitive and meaningful order of objects. However, they have slightly different implications.

Meaningful Sequence

Meaningful Sequence refers to making sure that content is presented in the correct sequence if the sequence affects the meaning. This sequence should be present in the DOM (document object model), which is what screen readers use to access content. Some examples of a meaningful sequence could be an article written in 3 parts, a webcomic, a roadmap, or a step-by-step user guide.

Digital A11y recommends the following tips to ensuring a meaningful sequence:

  • Make sure that content presented on the page is logical & intuitive.
  • Write HTML first & then manage design with CSS.
  • Make sure visual order matches the DOM order.
  • Use headings, lists, paragraphs etc to mark your content.
  • Make sure your users can differentiate the navigation menus from main content.

Focus Order

The focus order refers to the order in which interactive elements receive focus on a page. This relates to the Meaningful Sequence because the focus order should go through elements in the order that sighted people would view the page. If you’re in a left-to-right reading culture, this would mean moving focus from left to right and top to bottom.

The focus order should also move from one element to the next in an intuitive way. For example, if there is primary navigation at the top, secondary navigation to the side, and content in the center, an intuitive order would be:

  1. Primary nav
  2. Secondary nav
  3. Content

And if this feels like a lot of items to tab through before getting to the content, that’s where the skip link comes in handy.

A website with an intuitive focus order labeled in the header, side panel, and content
Image description: A website with labeled focus elements 1 to 5 in the header, elements 6 to 9 in the side panel, and element 10 in the content below.

If the focus order goes all over the page in no particular order, that is not accessible because it might confuse the user. The cause of this may be because the order of elements in the DOM is not structured well, so it's important that the order of elements in the DOM is logical and intuitive.

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • Manually check the focus order by tabbing through all elements of the page. Make sure that the focus order matches the visual order.
  • To enhance this testing, use this bookmarklet by Level Access to highlight the order of all focusable elements.


No credits yet. But this could be you!
No items found.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)