Blog von Thomas Puppe, Web Developer.

Hide pseudo content from screen readers for better A11y

Recently at ZEIT Online, we had a closer look at our SVGs and decided which ones were only cosmetical and hid them from screen readers. At that occasion, I saw that the same applies to pseudo-content.

Where possible, we use Unicode signs as decorative elements. Think about arrows on pagination buttons:

Button with arrow as CSS pseudo-element

You could use a pixel image or SVG here, but there are Unicode characters which look the same. And we can use these as content for CSS pseudo elements (SASS here for readability):

.article-pagination__button
    &--next:after
        content: "\203A"

\203A is the character , aka "single right-pointing angle quotation mark".

And screen readers read it that way. Meaning, the screen reader speaks the words "Link: Startseite single right-pointing angle quotation mark".

Which is not what we want. But, we can't set aria-hidden="true" on CSS pseudo element. What we can do is to apply CSS rules.

Stackoverflow knows: there's a media query for that.

@media speech
    .article-pagination__button
        &--previous:before,
        &--next:after
            display: none
            visibility: hidden

There are sources which suggest @media reader, speech, aural as meda query, but MDN recomments only speech

But

It does not work for me!? Our usual test setup for screen reading is VoiceOver in the regular browser, which basicaly reads what you see. And you still see the character, so VoiceOver reads it.

The speech media query is explicitly targeted on non-vsual user agents:

Screen readers that produce a speech rendering based on the the visual layout of the page are expected to match screen instead. This media type is for user agents that produce an audio rendition of the document, without any reference to a 2D visual layout.

https://drafts.csswg.org/mediaqueries/#media-types

So I could not test the code. But it should work ;-)

By the way: Unicode characters as pseudo-content are rendered as emojis by some browsers (mobile Safari, eg). But that's another story for another post.