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). …

Tor Martin Storsletten

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store