Page Title: propos d'Olansi
August 03, 2021 05:22

Reading order: CSS positioning

Actions

Severity Action
Manual Check Verify the 72 elements positioned with CSS maintain a reading order meaningful to users of assistive technologies.
Hidden 27 elements positioned with CSS that are hidden were not evaluated.

Details

Rule ID Order 1
Definition Elements positioned using CSS absolute, relative or fixed must maintain a meaningful reading order of content.
Purpose
  • If the reading order of text content on the page is presented to users of assistive technologies in an order that does not match the intension of the author, reading comprehension will be affected. In worst-case scenarios, the meaning of the out-of-order content may contradict or bear little resemblance to the intended meaning.
  • Assistive technologies render web page content based upon the sequence of the DOM elements within the HTML document.
  • Web page designs that rely upon table markup for layout or advanced CSS positioning techniques and JavaScript to rearrange content may result in a visual rendering of content that differs in reading order from the actual DOM ordering used by assistive technologies. Thus while the visual rendering may appear to have the correct or desired reading order, when rendered by assistive technologies such as screen readers, the actual reading order will be incorrect and correspondingly illogical.
  • The relationship of the DOM order of content to the intended reading order is therefore very important for ensuring that information is logically presented to users of assistive technologies.
WCAG Success Criteria

1.3.2 Meaningful Sequence (Level A, Primary Success Criterion)

Rule Category Styling/Content
Scope Page
Target Resources article, aside, div, footer, header, main, nav, section, table[role="presentation"]
Techniques
  • Minimize the use of CSS position values of absolute, relative and fixed.
  • Make sure related content moves as a block when repositioning content on a page.
Manual Checks
  • Disable layout tables (e.g. table[role="presentation"]) and CSS to make sure the content rendered has a meaningful sequence.
Informational Links

Element Results

Element Identifier Result Element Position Message

Column Definitions

Element Identifier
Information about the element associated with the result.
The information typically includes the tag name, accessible name or other information related to the rule requirements.
"Page" means that the result applied to the page. For example, the rule "One main landmark on the page" is a page level rule.
Element Position
The element position is based on the DOM order of elements in the page.
The element position maybe useful in helping to locate a specific element on the page evaluated (e.g smaller numbers are typically toward the beginning of a page and larger numbers typically toward the end of a page).
Element position 1 is the first element.
The highest element position is the last element.
Element position values for most rule/page results will not be consecutive since a rule only applies to a sub set of elements found on a page.