Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Today, I read CSS Can Influence Screenreaders by Ben Myers in which he shared CSS properties that can affect how screen readers treat content.

list-style might be the first surprising property influences accessibility. If you set e.g. list-style: none on a list certain screen reader combinations drop the announcement of the element being a list.

What was new for me was the mention of text-transform. Ben included an example which shows an "add button". It turns out that VoiceOver treats the button differently depending on the text-transform property. It reads out loud "add" and "A.D.D." for the uppercase version.

Creating accessible websites is hard these days. :/

Edited: As Massimo Artizzu pointed out, for the combination of Chrome and VoiceOver an additional aria-label fixes this screen reader behavior for uppercases characters.

Example showing different pronounciation depending on the text-transform CSS property.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 4 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles