Does CSS affect screen readers

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:

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium