Skip to main content
CSS is fun and cool and I like it.

Articles Tagged screen readers

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
2 Articles
{
,

}
Link

CSS Can Influence Screenreaders

Avatar of Chris Coyier
Shared by
Chris Coyier

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:

… Read article “CSS Can Influence Screenreaders”
Our Notes   /   Read at blog.benmyers.dev
Article

How to Section Your HTML

Avatar of Daniel Tonon
Author
Daniel Tonon
39 Comments
Go to Comments

👋 It has been brought to our attention in the comments (and on Twitter) that some of the techniques used in this article result in a poor user experience for screen reader users. We'll be making updates to make sure the article reflects the best possible information. For now, please see Adrian Roselli's Code Pen below for a more appropriate approach to sectioning the example layout. Thanks for being such an awesome community where we can all learn … Read article “How to Section Your HTML”