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