CSS Can Influence Screenreaders


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 to ArticlePermalink

The post CSS Can Influence Screenreaders appeared first on CSS-Tricks.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »