CSS Content
Meaningful content must not be implemented using only CSS :before or :after.
Why it matters?
Some people with visual disabilities need to customize the styling of a web page to see its content. When they modify or disable CSS styling, content inserted using :before or :after might move or disappear entirely.
- Good: Ensure that any information in inserted content is (1) available to assistive technologies, and (2) visible when CSS is turned off.
- Better: Avoid inserting meaningful page content using CSS :before or :after.
“New!” is inserted directly into the titles of newly reviewed books.
<h3>New! Potato Life</h3>
<h3>Angry Anteaters</h3>
An online book review site usesĀ :beforeĀ (and its content property) to indicate the titles of newly reviewed books.
<style>
.new-title::before {content: "New!" ;}
</style>
...
<h3 class="new-title">Potato Life</h3>
<h3>Angry Anteaters</h3>
This procedure uses the Web Developer browser extension.
- In the target page, examine each highlighted item to determine whether it is meaningful or decorative.
- An element is meaningful if it conveys information that isn’t available through other page content.
- An element is decorative if it could be removed from the page with no impact on meaning or function.
- If inserted content is meaningful:
- Determine whether the information in inserted content is available to assistive technologies:
- Open the Accessibility pane in the browser Developer Tools.
- In the accessibility tree, examine the element with inserted content and its ancestors.
- Verify that any information conveyed by the inserted content is shown in the accessibility tree.
- Determine whether the information in inserted content is visible when CSS is turned off:
- Use the Web Developer browser extension (CSS > Disable All Styles) to turn off CSS.
- Verify that any information conveyed by the inserted content is visible in the target page.
- Determine whether the information in inserted content is available to assistive technologies: