Login

team@digitalaccessibilitytraining.org


Reading order

Public Article

Article is certified Certified Article

The content of this article is certified for accuracy by the Digital Accessibility Centre.

HTML Structure

Requirements

  • CSS is not required to view or understand page content or navigation.

 Full explanation

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

The site must not rely on CSS to convey information, e.g. where CSS is used to order content. The content order must also be logical where CSS is unavailable.

Assistive technologies rely on the source code or other programmatically determined order to render the content in the correct sequence. Thus, it is important not to rely on CSS to visually position content in a specific sequence if it results in a meaning different from the programmatically determined reading order.

Meaningful Sequence

1.3.2  Meaningful Sequence (A)

The content of a web page must have a correct reading sequence that can be programmatically determined. If someone is using assistive technology or has applied a different style sheet to the page, there must be a way to determine a reading order that makes sense to ensure that people using assistive technologies or applying different style sheets can make sense of the content by reading it in a sequence that does not alter its meaning.

Tools required

How to test

  1. Open the web page to be tested.
  2. Check a meaningful reading order can be programmatically determined:
    • Disable Cascading Style Sheets (CSS) to remove any visual styling: With the Web Developer extension in Firefox or Chrome, select “CSS > Disable All Styles”.
    • Ensure that, compared to the styled page, the order in which the content is presented doesn’t change the meaning of the information in any way that could cause confusion or disorient the user. Note that if sections of the page such as the site menu, main content, or sidebar are in different relative positions compared to the style page, but their meaning and the meaning of the page overall are unaffected, then this is a pass.

Potential access issues

  • Unstyled reading order is different from the styled reading order in a way that could alter its meaning.
  • Content laid out in a table that does not make sense when linearised (i.e. read left to right, row by row).
  • White space has been used to lay out content in a table, to format a column, or to add decorative effects to text.
 WCAG 2.1 reference:

Create content that can be presented in different ways (for example simpler layout) without losing information or structure

Reading order was posted on 09/02/2023 @ 15:36