Why can’t I use CSS :before and :after to insert content?

Question

It's really very annoying that CSS pseudo element content, either :before or :after is outlawed. It is a really useful way of storing stock responses to activities, effectively creating global variables that have to be set only once. Eg html[lang="en"] [pageType="multichoice"] .wellDoneDiv::before{ content:"Well Done, that's right!"; } html[lang="fr"] [pageType="multichoice"] .wellDoneDiv::before{ content:"Bravo, vous avez raison"; } Moreover, many screen readers will read out such content. Have you any idea when/if ALLY's prohibition of such a useful resource may be revised.

Answer

This is a great question. Although you are correct about some screen readers reading content inserted using :before and :after, it still is not a good practice to insert meaningful content this way. The problem with utilizing :before and :after is when a person needs to disable CSS on a site. Once disabled this inserted meaningful content needs to remain visible and in a place on the page that is logical.

As called out in WCAG Success criteria 1.3.1, Information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. Additionally WCAG Success criteria 1.3.2 for meaningful sequence calls says that when the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

There is no indication that the WCAG guidelines will be updated to allow for the use of :before and :after for inserting meaningful content, because of the issues noted above around meaningful content not being preserved when CSS is disabled.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.