Top 10 Features for Designing Websites for Screen Readers

Image result for web design

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.Image result for web design
  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.

6 comments:

  1. Hi Sofia and thanks for this very valuable user-centric feedback.

    I just have to disagree with you on one issue though: #9 “When linking to external content, open a new tab”.

    I prefer to leave users in control of their browsing experience and habits by not imposing a new window/tab opening when clicking on a link. They can chose to do so by doing a Ctrl/Shift + click or right click or mouse wheel etc. but at least they have a choice not to. And when opening the new page in the same tab, they can still use the “Back” button.

    Furthermore, users can only ever read/hear a page at once so I don’t really believe in the whole “not losing them” argument.

    At last, if you _have_ to make your users open a new tab/window, they should at least be aware of it beforehand, especially if they can not see the actual tab/window opening. It is a WCAG2.0 criterion to make sure it is vocalised for screen reader users; see the “Giving users advanced warning when opening a new window” technique: https://www.w3.org/TR/WCAG20-TECHS/G201.html

    Otherwise, it’s a very nicely written article and we need more of those non-tech screen reader user feedback. Hope you get to write more in the future so we can all try to make the Web more inclusive.

    Best

    Arnaud

  2. Hi Sofia, Thank you for your article, I agree with each statement and Aranud’s comment is very precisely; I’d recommend you to complete the item #9 with the sentence: when your website links external content in a new windows/tab, it’s necessary to warn previously to user’s action through text.

    Thank you again for telling us about your experience with a screen reader, it helps to web developer an UX Designer to achieve and implement websites more accessible for everyone.

    Greetings from Colombia

  3. Hi Arnaud

    Thank you for your feedback. I will admit that the “open a new tab” part of this is fairly subjective (so are some of my other points). When I open external content from a site (this doesn’t apply if I’m clicking on a link that just goes to a different place of the original website), I automatically assume that it will open in a new tab because I’m going to a completely different website. My automatic reaction is to close that tab and expect the original site to still be there underneath, and it’s frustrating when it’s not (personal reflex at this point, I guess).

    The back button is not a great solution if you’ve clicked on multiple links on the new website because you end up having to click back multiple times.

    For me, it’s nice to have the original site underneath, but again, I can see how that may not be true for everyone.

    – Sofia

  4. There are involving important issues, one should take care.

    Innumerable web pages are being produced and being hosted everyday.

    This area is since Affiliate Campaign. Truly – I cannot find any

    drawbacks to commenting.

  5. The FI report, which is available on the DRC website, makes for vital reading as it includes a list of the most common problems faced by web users. It also includes the results of a survey of website commissioners and developers. 97% of large organisations claim to be aware that web accessibility is an important issue and 68% claim to take accessibility into account when designing websites. Yet, 81% of the websites tested by City University lacked evidence of any attempt to make their content accessible.

Comments are closed.