Does CSS affect screen readers

Tor Martin Storsletten
Oct 31 · 2 min read
Layouts on desktop and mobile
Layouts on desktop and mobile

The short and rather vague answer is that screen readers are affected by certain CSS properties. Different screen readers behave differently, and a screen reader might even have several methods of presentation that the user can choose from that alter the effects of CSS. Here’s a handful of examples:

Font-size, color, text-align, etc.

Screen readers generally ignore these. If you use CSS to make text stand out like headings, then remember to use heading elements (h1 through h6) as well. That lets screen readers utilize the headings for navigation.

Margins, padding, and positioning

These properties are also ignored by screen readers in most cases. Therefore you should not depend solely on these CSS properties for separating sections of content. Wrap sections of content in semantic HTML5 elements such as main, nav, article, and section. It is worth taking the time to learn how to use semantic HTML elements, as they improve SEO (Search Engine Optimization) as well as AX (Accessible eXperience).

Display and visibility

These two properties affect screen readers just as much as they affect the visual appearance. A few examples:

  • Display “none” and Visibility “hidden” both hide content from screen readers. Do not intermix them with aria-hidden as CSS and ARIA have separate uses.
  • All other display values affect different screen readers in different ways. The important thing to keep in mind here is that some screen readers will display two or more inline-like elements on the same line without any separator between them. For example, if you only use CSS to create visual distinction for fractional monetary units, then screen readers won’t be able to distinguish the fractional part from the base unit when reading prices. So make sure the plain text looks right even without any styling, or screen readers might read something like 9999 when the real price is 99 dollars and 99 cents.

Clip

This feature is generally ignored by screen readers. We can use this to our advantage if we want to visually hide content that is only relevant for users of screen readers. You can read more about this and other related techniques at WebAIM: CSS in Action — Invisible Content Just for Screen Reader Users.

Conclusion

Screen readers come in many flavors and they change over time, just like web browsers do. You can look at the examples here as general rules of thumb, but you should always test the things you develop with at least one of the popular screen readers on the market. Here are some good options:

FINN.no Blog – Product, Design, and Tech

Posts from the people building the world’s greatest marketplace

Tor Martin Storsletten

Written by

FINN.no Blog – Product, Design, and Tech

Posts from the people building the world’s greatest marketplace

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade