text-transforms affect screen readers, too!
- Published at
- Updated at
- Reading time
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.