CSS generated content

CSS allows to insert text, images and icon fonts into a web page. What are the accessibility implications?

Text via CSS

The CSS :before and :after pseudo-elements allow to insert text into a web page. This text is added to the accessibility tree and e.g. screenreaders can read it. Here is an example with text inserted via :after. In this case, no special effort is needed for accessibility.

Images via CSS

Techniques

There are two techniques to insert images via CSS:

• Via background url: not recommended since the image will be lost when users specify their own background in their browser or use the high contrast version of their operating system.
• With a :before or :after pseudo-element: these images remain available when someone reads the page with high contrast.

Example

<a class="twitter" href="https://twitter.com/anysurfer"></a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

This is a link with no text; it only contains a Twitter icon. Images inserted via CSS, don't become part of the accessibility tree. Hence, this link has no meaning for assistive technology users.

Text alternative

Images inserted via CSS can't get an alt attribute.

• This is not an issue when the image is purely decorative.
• If the image conveys information, we have to apply another technique to give this image a text alternative.

In the example, the Twitter icon is not decorative because it is the only content that provides meaning to the link. Several techniques are available to provide a text alternative for the Twitter icon:

Hidden text

We can add a hidden text inside the link. That text is not visible on the screen but remains available for screenreaders and other assistive technologies:

<a class="twitter" href="https://twitter.com/anysurfer">
<span class="visuallyhidden">Twitter</span>
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;
}

More about this technique in the article about hidden text.

With an aria-label

We can add an aria-label to the link:

<a class="twitter" 
aria-label="Twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

This technique can't always be used: an aria-label can only be added to an element that has a role and no accessible name. In this example, the a-element provides a role link. The link contains no text so there is no risk that the aria-label overrides contents. More details about this technique in the article about aria-label.

Icon fonts

Icon fonts insert a character (mostly via the CSS :before and :after pseudo-elements) but the visual meaning often differs from what a screenreader would normally read for that character. Several actions are needed to make icon fonts accessible:

• Text inserted via CSS (including icon fonts) becomes part of the accessibility tree. Since we don't use the character for its literal meaning, we need to delete it from the accessibility tree: hide it with aria-hidden="true". This implies that we have to insert the character via a span inside the element and not on the element itself.
• If the character is decorative, no further action is needed.
• If the character adds information, add replacement text as mentioned earlier for images inserted via CSS.

<span class="phone" aria-hidden="true"></span>
<span class="visuallyhidden">Phone number</span>

accessible icon font examples.

Summary

• Text inserted via CSS: no problem
• Decorative image inserted via CSS: no problem
• Meaningful image inserted via CSS: not via background-url + add hidden text or aria-label
• Decorative icon font: insert via span, hide it with aria-hidden="true"
• Meaningful icon font: insert via span, hide it with aria-hidden="true" + add hidden text or aria-label