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.
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?
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
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
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
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.
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.
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.