18. CSS Content and Positioning
Accessibility Requirements
- WCAG SC 1.1.1 Non-Text Content – All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
- Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
- WCAG SC 1.3.2 Meaningful Sequence – When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Test Method Rationale
Meaningful information provided solely through CSS content may not be in the Document Object Model (DOM). Equivalent information must be available without CSS.
Limitations, Assumptions, or Exceptions
- Only the CSS techniques identified as Failures in WCAG 2.0 Level A and Level AA are included in this test. There may be other CSS techniques that affect conformance.
- Inline styling is included in this test.
18.1 Test Procedure for Meaningful Background Image
Baseline Test ID: 18.1-CSSMeaningfulImage
Identify Content
Meaningful background images rendered by CSS
Test Instructions
- Check that the meaningful CSS image provides an equivalent text alternative description: [SC 1.1.1]
- ARIA
role=”img”and non-emptyaria-labelvalue, and - The
aria-labelvalue provides the same information as the meaningful background image
- ARIA
Test Results
If any of the above checks fail, then Baseline Test 18.1-CSSMeaningfulImage fails.
18.2 Test Procedure for CSS Positioned Content
Baseline Test ID: 18.2-CSSPositionedContent
Identify Content
Meaningful content positioned with CSS
Test Instructions
- Check that the reading order of the content (in context) is correct without the CSS position property. [SC 1.3.2]
- Check that the meaning of the content (in context) is preserved without the CSS position property. [SC 1.3.2]
Test Results
If any of the above checks fail, then Baseline Test 18.2-CSSPositionedContent fail.
Advisory: Tips for streamlined test processes
- These tests are not to be performed by disabling all CSS. Content is not required to be perceivable and operable with all CSS disabled.
WCAG 2.0 Techniques
The following sufficient techniques and/or common failures were considered when developing this test procedure for this baseline requirement:
