The effect of CSS on screen readers
CSS
We can find a lot of information about how badly written HTML can affect the screen readers, but there is almost nothing about CSS.
A few weeks ago I noticed that NVDA read my <ul> wrong. It forgot to say "bullet" before the list items. I scratched my head for a few minutes, then I realized, that CSS changed the behaviour of my semantically correct HTML.
After this "incident", I searched for what other effects CSS has on screen readers and I found a brilliant article about this topic from Ben Myers. (You can find the link at the end of this article.)
This article was 1.5 years old, when I found it, so I decided to redo the tests to see, if anything has changed and added some new elements to my list. I will do tests with VoiceOver and NVDA in Google Chrome and Mozilla Firefox.
CSS vs. unordered lists <ul>
This is what I noticed myself. I used list-style-type: none on an unordered list to get rid of the default bullets before the list items.
Basic behaviour: It tells me, it is a list and how many items are in the list. And say "bullet" before every list items.
Experienced behaviour: It tells me, it is a list and how many items are in the list, but forget to say "bullet" before list items.
There wasn't any difference between the two screen readers and the two browsers.
I didn't tested it in Safari, but Ben Myers wrote, that VoiceOver in Safari doesn't treated it as a list at all.
CSS vs. ordered lists <ol>
I did the same test with ordered list, and I experienced almost the same.
Basic behaviour: It tells me, it is a list and how many items are in the list. And say this is the first/second/third/etc. item before every <li>.
Experienced behaviour: It tells me, it is a list and how many items are in the list, but forget to say the position of the item in the list.
CSS vs. text-transform
Ben Myers mentioned, that VoiceOver messed up the text on a button, because it was changed to uppercase with the text-transform property. The text on the button was "Add", and VoiceOver read it as the acronym A.D.D.
Luckily I didn't noticed it, so I think it is fixed now.
CSS vs. flexbox ordering
If you change the original order of the HTML elements with flexbox ordering it will not affect the screen readers at all. It will read the content as you wrote it in your HTML.
CSS vs. CSS generated elements
Screen readers will handle ::before and ::after pseudo-elements as content. You can also use ::marker pseudo-element before list items to create custom indicators like bullet points, numbers, letters, etc.
Before you use them to add content to your website, it is good to know, that they are not rendered in the DOM. In some special cases (for example, if CSS is turned off), visitors may miss these elements.
CSS vs. tables
Maybe it is obvious but if you give any display property for a table other than display: table it will totally mess up it's semantics. So please don't add display: grid to a table. It's better to look for another layout.
CSS vs. display and visibility
If you want to hide something from everyone, you should use display: none; or visibility: hidden; on the element.
If you want to hide some content visually, but present for screen readers, you should use something like this:
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
-webkit-clip-path:inset(50%);
clip-path:inset(50%);
border:0
}Just copy and paste it in your CSS file and add the .sr-only class to the element, you want to hide.
I have to mention 2 HTML related things here:
- you can hide content from everybody by adding the hidden attribute to the element.
- and element can be visible, but hidden from screen readers by adding aria-hidden="true" to the element.
Takeaway
Perharps these aren’t such big things, but it’s worth paying attention to little details. If you find anything that is changed, or you know something I should add to this list, please contact me. Keep this article updated together!
Always do accessibility test with screen readers, even if it seems fine, because... you never know. :)
Here is a very well written article about this topic:
