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.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 11 days ago.