When we talk about the website design, it usually concerns how these websites appear to us visually — how colors and typography work together, how page elements are placed and spaced, and whether navigation links are placed in the right locations. However, not everyone interacts with websites this way, so we need to consider non-visual aspects of design as well.
It’s been estimated that, in the U.S., over seven million people experience a visual disability which requires “alternative methods to engage in any activity that people with normal vision would do using their eyes.” Many of these people rely on assistive technologies like screen readers to experience websites and other digital content. As a designer, developer, and/or website owner, it’s on you to make your website accessible to this portion of your audience.
In this guide, you’ll learn what a screen reader is and how they work. I’ll then explain some best practices for making your website more accessible to those who use screen readers, in order to ensure that your content is available and enjoyable for everyone.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
What is a screen reader?
A screen reader is a piece of computer software that converts digital text into audible and/or tactile form. Screen readers enable users to interact with their devices in a non-visual manner, and are used primarily by people who are blind or have low vision, as well as those with cognitive limitations that prevent them from viewing onscreen text and media. Many screen readers have additional features to help users navigate web pages, computer applications, and operating system interfaces.
Screen readers are an important and popular assistive technology. They enable the independent use of digital devices by those who otherwise would not be able, or who would face significant difficulty.
While most commonly utilized by people who are blind or who have low vision, screen readers also help those who:
- experience cognitive difficulties or learning disabilities like dyslexia.
- experience difficulties reading print.
- are learning a language.
- prefer consuming content auditorily to reading.
Some may also use screen readers alongside their limited vision. For example, one may consume the images and media on a web page visually while relying on a screen reader for text-based content.
How do screen readers work?
A screen reader is a software application that is installed onto a device (or, in some cases, as a browser extension) and used with other applications on that device. There are a variety of free and paid screen readers available for Windows, macOS, Linux, iOS, and Android.
A user controls their screen reader with the keyboard. A screen reader comes with a library of keyboard commands that tell the screen reader to do things like start/stop reading, jump back to re-read a section of text, spell out words, skip to different parts of a page, move the cursor/focus around, play a media file, or click a link, button, or another interactive element.
Screen readers can translate text information into two forms, speech and braille. Most commonly, screen readers use text-to-Speech (TTS) technology to read text content aloud in a synthesized human voice. Proficient users of TTS screen readers often increase the reading speed far past what the average person is capable of reading visually.
In addition to TTS, some screen readers can convert onscreen text into braille. For this function, users connect an external device, called a refreshable braille display, which generates braille characters on a pad as the screen reader scans the text. Here’s what a typical refreshable braille display looks like:
Some users also prefer using TTS and a refreshable braille display together.
Screen readers are available for mobile devices too. Since most smartphones and tablets don’t have physical keyboards, screen readers for these devices rely on touchscreen interactions — swiping, tapping, and tapping-and-holding — to control playback and navigate page content.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
How to Design Your Website for Screen Readers
Given the popularity and importance of screen readers today, website owners and developers need to consider screen reader accessibility when building and maintaining their online properties. This ensures that all visitors have access to the same content and an optimal experience.
Screen readers translate web pages by reading HTML files directly, so everything the reader needs should be included in this file. Here are some basic steps you can take to help screen readers process your pages and make your website easy to navigate for screen reader users. To get the most from this section, we recommend brushing up on your HTML if you need to.
Structure your HTML with the appropriate tags.
Screen readers use HTML tags to understand the content and regions of the page, and what elements are available for the user to select. For this reason, the most effective way to make your web pages accessible is to structure your HTML code with semantically rich tags.
When we say a tag is “semantically rich,” we mean that the name of the tag itself conveys its purpose to the screen reader. Tags like <p>, <img>, <h2>, <ul>, <ol>, and <table> are all semantically rich because it’s clear what they are from the tag name itself — <p> is a paragraph, <img> is an image, and so one. On the other hand, <span> and <div> tags are generic, and not semantically rich — they could be used to any element. For these tags, you can use ARIA landmarks — we’ll cover those soon.
Writing HTML this way is important for a few reasons. First, screen readers allow users to jump between tags of the same type. A common use of this is headings, an important navigational method for screen reader users. When a screen reader detects the use of <h2>, for example, it allows users to jump between H2s, similar to how sighted users might scan a page by reading the headings.
Second, some HTML elements, such as <table>, activate specific screen reader commands. When a screen reader sees the <table> tag, it knows to let the user navigate horizontally and vertically through the table with their keyboard. This is why you should avoid making elements that look like a table, list, or button but use an unmatched tag (like <div>). Instead, use the appropriate tag when possible.
Finally, a <title> tag is also useful to screen readers. Users can set their screen readers to read the contents of this tag after the page loads to lend further context.
Indicate language in the <html> tag.
A screen reader needs to be told which language a web page is written in, so it knows how to pronounce words to the user with TTS.
Screen readers will first look for the lang attribute inside the <html> tag for page-wide language information. For example, if a page is written in English, its opening <html> tag would read:
In cases when foreign words appear on the page, the lang attribute can be placed inside any other tag, commonly <span> or <p>, to denote a temporary language change:
Use ARIA roles.
ARIA roles are values that indicate the function of a page element or region for screen readers. They may be placed inside <div> and <span> tags with the attribute role. ARIA roles include main, form, navigation, and search.
For example, if you want to indicate that a list of links is a navigation menu, you can place an ARIA landmark like so:
Here, role=“navigation” is the landmark.
Also note that ARIA landmarks should only be used in <div> and <span> tags, as these are generic tags and not semantically rich. Tags like <menu>, <nav>, <form>, and <main> should not use ARIA landmarks, as their purpose is already established with their names.
While not all screen readers detect ARIA landmarks, it’s good practice to use them in any page region for which the function is unclear from the tag names alone.
Write descriptive headings and first sentences.
Similar to how sighted users skim page content visually, screen reader users can preview headings and paragraphs to see if the content is relevant to them. Therefore, it’s good practice to make your headings as descriptive as you can, and to begin paragraphs in a way that gives readers an understanding of the content to come.
Use alt text.
While it’s certainly a benefit, the main purpose of alternative text isn’t SEO — it’s to give screen readers a captioned alternative for media content. When it encounters an image, video, or other piece of media, a screen reader will default to reading alt text if it is provided. If alt text is not provided, screen readers will ignore the image or read the image file name.
To make your pages accessible, always add clear and descriptive alt text to each piece of non-text content, namely images, videos, icons, and embeds. For instance, suitable alt text for this image...
...might be:
For more tips on how to optimize your alt text for screen readers and search ranking, see our guide to image alt text.
Use punctuation correctly.
Here’s another tip that assists all page visitors, screen-reader-assisted and not. To simulate speech, screen reader TTS pauses for instances of periods, commas, new paragraphs, and other punctuation. For the best experience, make sure you’re implementing punctuation in the proper ways.
Conduct screen reader accessibility testing.
After implementing the measures above, test your web pages with a screen reader to ensure your accessibility measures work properly. You can conduct this testing yourself or recruit an accessibility tester to evaluate your website. You may also try a web accessibility testing tool to support your effort.
If you decide to test your own website, choose a free text editor for your operating system. NV Access is a popular option for Windows users, while macOS devices have the VoiceOver screen reader built-in.
Then, familiarize yourself with your screen reader and learn all of its basic functions. If you foresee conducting more accessibility testing, commit to developing enough proficiency on your screen reader to navigate websites with the monitor turned off. We also recommend observing experienced screen reader users to understand how these visitors actually interact with your site.
Designing Accessible Websites for Screen Readers
By coding and designing your web pages in accordance with accessibility principles, not only do you make your website enjoyable for folks using screen readers — you also show that you care about your user base, and strive to deliver the best experience possible for everyone. In other words, it’s simply doing the right thing for those who matter most to your business.
