Accessibility support for CSS generated content – Tink – Léonie Watson

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

Copy to clipboard

#a:after { content: ‘bar’; }

Code language

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 [...]

Read article at

Article Taxonomies

Categories: Terms: , , , , ,