CSS Can Influence Screenreaders

Programming - Mar 31, 2024

Ben Myers covers some clear examples of where CSS totally changes what some screen readers announce. For example, some screenreader will see text-transform: uppercase; on a button label that says “Add” and read it like an abbreviation, “A.D.D.”

These cases of CSS messing with our screenreader announcements are initially shocking, perplexing, and maybe even appalling. After all, they seem to conflict with our mental model of CSS, one that’s likely been instilled in us since we started learning web development: HTML is for content, and CSS is for visual appearance. It’s the separation of content and presentation. Here, by changing what screenreaders announce, it feels like CSS is encroaching on content territory.

All the more evidence that we have to actually test things. I tested that example above in VoiceOver, and sure enough, “A.D.D.”

Direct Link →

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More