Alternative text for CSS generated content

Discover how to add accessible alternative text to CSS generated content for better accessibility.

The majority of content on the web is conveyed using HTML. However, CSS may also be used to insert content into a web page.

But how do we actually make the CSS content property accessible for screen readers?

Creating alternative description for CSS content property

You can provide alternative description with accessible content fallback through by appending a forward slash and then a string of text or a counter. Example: content: "foo" / "alt-text";

Alternative text may be specified for an image or any <content-list> items, by appending a forward slash and then a string of text or a counter. The alternative text is intended for speech output by screen-readers, but may also be displayed in some browsers. Note that if the browser does not support alternative text, the content declaration will be considered invalid and will be ignored. The / <string> or / <counter> data types specify the “alt text” for the element.

Note that content-list is a list of one or more anonymous inline boxes appearing in the order specified. Each <content-list> item is either contents or of type <string>, <image>, <counter>, <quote>, <target>, or <leader()>.

/* <content-list>: a list of content values. 
Several values can be used simultaneously */
content: "prefix" url(http://www.example.com/example.png);
content: "prefix" url("/images/example.png") "suffix" / "Alt text";
content: open-quote counter(chapter_counter);

Implementation and usage

For example, we may prefix specific links with the small ⓘ icon to alert users that they will find additional information. That sign might be interpreted by a screenreader as Circled Latin Small Letter I or Information source combining enclosing circle, neither of which effectively communicates the intended function.

A better option would be to just hear More detailed information:.

.info::before {
  content: "\24D8" / "More detailed information:";
}

Additionally, you can define the alternative text using an element attribute or a custom CSS property:

.info::before {
 /* Attribute content and element content is read out */
 content: "\24D8" / attr(data-content-alt);
  
 /* Custom property and element content is read out */
 content: "\24D8" / var(--content-alt);
}

In above example, the alternative text is retrieved from an attribute (data-content-alt) or a custom property (--content-alt).

Workable example