Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
1min
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 11 days ago.

Related Topics

Related Articles