Skip to content
Andrew Hick edited this page Jun 6, 2023 · 5 revisions

1.3.2 Meaningful Sequence

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

When this is applicable

Always.

Check the sequence

Do one of the following, or if you find the results confusing, do one more:

  • Use the Web Developer extension and go to 'Miscellaneous > Linearize page' - note this does not work with modern CSS layouts such as flexbox
  • Switch off styles with the Web Developer extension's 'CSS > Disable All Styles' or with WAVE's 'Styles > Off' (if things are hidden using CSS and also hidden for screen readers, they must be ignored in a view without styles; images might interfere with understanding of text, maybe switch them off as well)
  • Enable caret browsing in Firefox - under 'Preferences > Browsing', select "Always use the cursor keys to navigate within page" and use the arrow keys to navigate through the page (this can be quite buggy)
  • Use a screen reader, ideally NVDA (ignore live region updates, caveat: different screen readers might do different things and/or be buggy)

Check that:

  • the reading order of the content (the way content is read by assistive technologies) makes sense - it does not need to be the same as the visual order
  • if layout tables are used, the order still makes sense when the table is linearised (from left to right, top to bottom)

Ignore focus order Success Criterion.

Best practice

  • have the same reading order as the visual order
  • do not use layout tables

Mobile app testing

Use a screen reader to check that the page order makes sense.