Accessibility support for CSS generated content
29th of March 2015
- Code things
The CSS before/after pseudo-selectors can be used to insert content into a page. In some situations this technique is a useful thing to do, but how do browsers and screen readers handle the generated content?
Quick recap: The before/after selectors insert content either before or after an element’s existing content. For example the CSS shown below will insert “bar” immediately after the “Foo” that is already present in the HTML:
Code language
CSS
Copy to clipboard
#a:after { content: ‘bar’; }
Code language
HTML
Copy to clipboard
<a href=“/“ id=“a“>Foo</a>
The result of which can be seen in this test case. For more information on using these selectors, read Chris Coyer’s introduction to after/before on CSS Tricks.
Accessibility mechanics
CSS generated content isn’t included in the DOM. Ordinarily browsers take information from the DOM to create the accessibility tree, but in this case the generated content is still factored into the accessible name computation for the element.
Accessibility results
Using the test case [...]