text-transforms affect screen readers, too!
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my learnings regarding web development.
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.
Related Topics
Related Articles
- SVGs filters can be inlined in CSS
- Order in CSS transformations – transform functions vs individual transforms
- How to make textareas grow automatically with a little bit of CSS and one line of JavaScript
- Radio buttons, checkbox and the question when to use what
- A centered CSS navigation with fit-content