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

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

Image for post
Image for post
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 screen reader starts reading the new text. …

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 screen readers from getting lost in the inert content since you hide it from them. But did you know that if you set aria-hidden on an element, you hide the entire element including all its descendants? Perhaps this sounds obvious, and yet there are numerous websites today that set aria-hidden on the body element itself in an attempt at hiding content that is outside the dialog box. If you would like to know what this feels like for a screen reader user, then I invite you to also set CSS “visibility: hidden” on elements that match the [aria-hidden] selector. And before you ask, aria-hidden=”false” has no effect on an element if one of its ancestors has aria-hidden=”true”. …

Image for post
Image for post
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 it a “Purple dinosaur with a Santa hat on its head”, or a “Red exclamation mark emitting yellow sparks”? A good textual description of an image makes it possible for blind and sighted users to talk about an element, which is especially important if it’s a significant element. For example, imagine if a link to a contact information page is just an envelope icon with the alt text “Contact us”. That could easily create confusion if e.g. …

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