CSS Content Property

CSS content property inserts content on a web page. The content types include text, images, symbols, emojis etc.

The content property use pseudo-elements before and after to place content. Since the content is inserted on the web page using CSS, is the content accessible? Can the screen readers that read content through the browser DOM pick the information from this property?

Let us first understand how to insert content using CSS content property. We will also check some sample implementation’s. Directly jump to CSS content property accessibility section if required.

Writing CSS Content Property

As the name suggests the ‘content’ is a CSS property.

{
Content : ‘something here’;
}
This is similar to any other CSS property.

While blocking this content property to use in multiple instances using the HTML class attribute, the content property need to be used along with ‘before’ or ‘after’ pseudo-elements.
.class-name::before
{
Content: “something goes here”;
}
Now when you use the class “class-name” to any of your HTML element, the content “something goes here” gets inserted at the beginning of that element’s content as the pseudo-element before is used.

What can be inserted using CSS content property?

CSS content property allows inserting images, text, symbols, emojis etc. Let us now see how can we do that.
Jump directly to text entry or symbols & emojis.

Inserting images using CSS content property

Images can be inserted easily with the content property. Code pen example below. Interestingly alternate text can also be added to the images. The best practice is to avoid using CSS to insert images on the web page. If they are decorative may be one can consider but informative images are best to avoid using CSS. Though the alternate text can be provided all screen reader and browser combinations may not have support for the property. Developers need to test and ensure alternate methods such as aria-label or role presentation need to be used for such images.
Users those disable styles will completely miss the images if they are loaded from the stylesheet.

Code pen example

See the Pen
Images & alt text using CSS pseudo by Rakesh Paladugula (@maxability)
on CodePen.

Text, bullets and blockquotes

Text, bullets and blockquotes – which of these cant be written with HTML? Do you really need CSS content property? If your answer is “I can create the experience required without using CSS ” then avoid using it. In case you cannot avoid using content property to write the text, ensure you test it with screen reader, zoom and in Windows high contrast mode. Users will definitely miss the content in one of these perceivable modes. Ensure that the meaningful and informative content is percieved by the users in the way percieve.

Code Pen Example

See the Pen
Adding content, list symbolls and block quotes using CSS Pseudo by Rakesh Paladugula (@maxability)
on CodePen.

Symbols & emojis

In addition to text and images, symbols such as $, emojis such as 🙂 can also be inserted on the web page using CSS content property. Find different emojis and their Unicode to use on the websites.
Symbols and emojis need to be tested with screen reader. Ensure that they are announced appropriately with them. Similarly ensuring that they are scaled while zooming to read the content is also important.

Code Pen Example

See the Pen
Symbols & emojis using CSS by Rakesh Paladugula (@maxability)
on CodePen.

Accessibility implications With CSS Content Property

Purpose of this article is not to derive at a conclusion if CSS content property is good for accessibility or not. The article provides the information for the developers to decide depending on the situation.

basics

HTML is a markup language and CSS is to define the styles. To put in other words, standard way is of coding is to separate content from presentation. This is also the fundamental rule for accessibility.

CSS need to be used just for presentational purposes. With the CSS content property, text, images, symbols etc can also be inserted into the page that violates the fundamental.
According to WCAG 2.1, 1.3.1 Info & relationships, Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Using non-decorative content in CSS

The CSS content property allows to insert content on the page. The property will insert any content the developer intends to. The advice is to insert only decorative content using these pseudo before and after techniques. Failure technique 87 due to inserting non-decorative content by using :before and :after pseudo-elements has detailed information on how these elements impact accessibility.

Accessible Name Computation

According to Accname 1.1 recommendations, the information conveyed through CSS content property should be provided to assistive technologies. Observe the point F under section 4.3.1 in Accname 1.1 document.

Use ARIA

When using the CSS content property, get the content tested with wide variety of screen reader and browser combinations. The decorative elements that are not necessary for the user may be read aloud by some screen readers. May be the text that is important for the user to know is not read at all.
Use role=presentation or aria-label as the case may be if the screen reader requires to be supported is not supporting.

Use off screen text

The technique may be old but fine if it solves the purpose. Off screen text is a class that hides the content from those who can see using CSS but still be in the DOM. Since the content is in the dom, screen reader can still read the content. Read this Web AIM article, if you don’t know what is it all about.

Conclusion

Open for implementation methods that suits the need. The solution must also support screen readers, Zoom users and those who use Windows high contrast mode. Best is to avoid informational and important content using the CSS content property.