Top 10 Features for Designing Websites for Screen Readers

While I am not familiar with the technical aspects of web design, I use screen readers to navigate the web for both work and personal use. I am comfortable with advanced screen reader features and can get around many accessibility challenges. However, even with these skills, I have noticed that some websites are much easier to navigate than others, and they all share common features.

Some of these are essential – the website would be completely inaccessible for a screen reader user without them. Others, however, are nice to have because they give screen reader users an equal experience with visual users, even though the website can still be used effectively without them.

For developers that want to ensure that their website is both visually appealing and easy to navigate – not just accessible – for screen reader users, here are the ten features (in rough order of importance) that make for a seamless navigation experience.

1. Properly label buttons and links. On some websites, links are pictures or buttons that are read as something like “unlabeled 1 button” by a screen reader. This often happens with websites that rely heavily on Flash Player and have a lot of animated, visual designs. While the visual appeal is understandable, these websites are impossible to navigate for screen reader users if the buttons are not labeled properly.
2. Stick to buttons and links if possible (and avoid elements that require hovering with the mouse). Buttons and links mostly work consistently with screen readers. However, elements that require hovering with the mouse to see more options almost never work with screen readers, even though there is technically an on mouse over element command. Mint.com (a popular budgeting site owned by the same company that created TurboTax) relies on hovering to edit budgets, which means I can’t use the service.
3. Avoid auto-play content with sound. This is common in news websites that play ads or a video of their coverage automatically. I understand the need for ads, but when a video starts to play loudly as soon as the page loads, it drowns out the screen reader, which makes it almost impossible to find the pause button or navigate through the rest of the website. When this happens, I often end up leaving the website and going somewhere else to find what I was looking for.
4. Consistency. If the main menu has buttons, stick to buttons. If it has links, stick to links. While a link and a button may not necessarily look different visually, it matters for screen readers. Since I cannot quickly skim through a website with my eyes, I often rely on a screen reader command that pulls up a list of all links or buttons on a website. If all the menu items are not the same element, however, I cannot get a clear picture of all the website options, which invalidates my only substitute for visually skimming through the site. For example, twitter.com has a home link, a moments button, a notifications link, and a messages button on its main menu! The website is still accessible, but navigation could be easier if it used buttons or links consistently.
5. Avoid overusing Frames with a lot of content. This is most common in news websites that have frames with ads every couple of lines, but it could show up in other situations. For some reason, these frames cause the screen reader to lose focus, which makes it difficult and slow to read the content because I have to manually find my position on the page every time there is a frame.
6. Clear alerts. It is frustrating when a website refreshes every few seconds with no warning.
7. Popup windows should be on top, and the screen reader should automatically focus on them. This comes up in job searches or shopping websites that have a “filters” popup to narrow results. Sometimes these popup windows show up visually, but the screen reader is on a completely different part of the page, or the filters are not read at all. For example, USA Jobs (a government website!) has a “more filters” popup on its advanced search page that the screen reader sometimes does not read at all.  Even when the screen reader does recognize the popup, it doesn’t automatically focus on the popup when I click on it.
8. Use alt text or images. I covered labeling links and buttons properly above, but having alt text on decorative pictures is also important. One of the misconceptions people often have about legally blind users is that since we aren’t looking at the screen, we do not care about pictures. The problem is that I know what many images look like, even if I can’t see the smaller pictures on the website. For example, I know what an American flag looks like because I have seen huge flags on walls or in public places. It gives me a better sense of the website when a picture of the American flag has alt text telling me that it is the flag, instead of just having a picture that has no description, leaving me out of the website experience.
9. When linking to external content, open a new tab. It is frustrating when a website links to external content on the same window because if I close that window, I have accidentally exited the website completely. The website should make it easier for me to stay on, not harder!
10. Headings, headings, headings! This may be a personal preference, but it is hard to navigate a site efficiently when the main content and major sections of a site are not under headings. The Wall Street Journal and The Atlantic, for example, both use headings well. It may not matter visually if the text is already in bold or is set apart in some other way. However, I have a screen reader command that recognizes headings, which makes it easier to quickly navigate to the main content of the site. Headings are the equivalent of putting text in bold to let visual users know that this content is important.

Many of the features outlined above are behind-the-scenes classifications. A button or a link may not look different visually, but they matter for screen reader navigation. Unfortunately, while many of the features outlined above are fairly common around the internet, very few websites use all of them. Google is the only website I use regularly that has every feature outlined above, at least when it comes to its own content (it cannot control whether other sites have alt text on image search results). Many more websites are still accessible, but most do not go beyond that to make navigation easier.

Developers should keep these features in mind. They will not harm the visual experience, but they will make life easier for millions of screen reader users around the world.

Sofia Gallo

Accessibility Consultant | Washington D.C.