Verify that the content should be organized into meaningful sequences when linearized, e.g. when style sheets are disabled or unavailable
Description
This rule only gives a hint: The content should be organized into meaningful sequences when linearized, e.g. when style sheets are disabled or unavailable.
Purpose
Screen readers and other assistive technology will interpret the content on your page in the wrong order if it is not organized in a meaningful sequence
. If this is presented out of sequence, users may become disoriented and may not understand the content.
For example, when reading in English, we read the left-hand column before the right-hand column.
How to fix it
- Turn off the styles on the page and read through your content to ensure it is laid out in a meaningful way. You may use the following code in the developer console:
['style', 'link'].forEach((element) => Array.from(document.getElementsByTagName(element)).forEach((elementToRemove) => elementToRemove.parentElement.removeChild(elementToRemove) ) ) - Validate your page using W3C Markup Validation Service.
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content
- F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
Source: WCAG.
Standard
Accessibility, WCAG 2.1, Success Criterion 1.3.2 Meaningful Sequence (Level A)
Rule ID: meaningful-content-sequence