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