Does CSS affect screen readers

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:

• JAWS for Windows
• VoiceOver on Mac and other Apple products
• NVDA for Windows