text-transforms affect screen readers, too!
- Published at
- Updated at
- Reading time
- 1min
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.
Join 6.1k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.