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…

(If you don’t already know what ARIA live regions are, you might want to first check out MDN’s article about aria-live regions, as the following article is specificly about when to use aria-live.)

Woman using a laptop, and envelopes floating through the air from the laptop toward a list.

It is a common misconception that aria-live should be used directly on all container elements that contain dynamic content, i.e. content that may change without a page reload. At first glance, it might sound like aria-live is a brilliant way of telling a screen reader to automatically start reading even huge blocks of text that dynamically appear on the webpage. Except… no. Let me explain what happens.

The aria-hidden attribute enables web developers to hide content for assistive technology. It is a powerful way of reducing the amount of unnecessary content that a screen reader has to read before locating the desired content on a webpage. When used correctly, this feature greatly increases the level of AX (Accessible eXperience) for users of screen readers. But what are the consequences when aria-hidden is not used correctly? Here I’ll share some of my own personal experiences as a screen reader user.

1. Modal dialog boxes

It is common practice to use aria-hidden for hiding content that is outside modal dialog boxes. This prevents…

Possible alt text for this image: Three people walking off a plank that is tilting over a hole, and one last person is left standing on it…

It is common knowledge that images are required to have an alt attribute. This is one of the primary rules of accessibility for web pages (defined in WCAG 2.1 Principle 1, Success Criterion 1.1.1). Nevertheless, coming up with a good alt text for an img element might be easier said than done. Here are some guidelines that may help you:

  1. The alt text is meant to be a description of the image, not a title, hint, or tooltip. Try to describe the image with a clear and concise sentence. What do you see when you look at the image? Is…

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