Seven Screen Reader Usability Tips

Simply ensuring that your Website is accessible to screen reader users is, unfortunately, not enough to guarantee that these users can find what they’re looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so poor that they needn’t have bothered stooping by in the first place.

Fortunately, there are plenty of simple-to-implement guidelines that you can follow. The seven easy tips below will drastically improve a site’s usability for screen reader users, as well as all other visitors.

Tip 1: Use Descriptive Headings

The use of on-page headings is one of the most important usability features for screen reader users, as it helps these people more easily understand the page structure. Although text on the page may display as a heading to sighted users, it must actually be labeled as such within the HTML code in order for screen reader users to know it’s a heading.

Screen readers don’t look at Web pages: they read HTML code. If a piece of text is identified as a heading within the HTML code, the screen reader will announce that it’s a heading. If not, screen reader users won’t be able to tell your headings from the rest of your text.

There’s another, less obvious usability benefit of using proper heading tags: screen reader users have the ability to call up a list of on-page headings, and jump to the section of the page in which they’re most interested. If your page is properly marked-up, screen reader users will find it much easier to navigate than a page that doesn’t use the correct tags. Here’s what this headings box for the BBC homepage looks like in JAWS, one of the most popular screen readers:

Seven Screen Reader Usability Tips

This facility works in much the same way as the process that sighted Web users employ to scan through Web pages by glancing at headings. If headings are descriptive of the content that appears beneath them, it becomes far easier for screen reader users to find the information they need.

Tip 2: Write Descriptive Link Text

Screen reader users can browse Web pages by calling up a list of on-page links, and activating the link in which they’re most interested. As such, non-descriptive link text such as ‘click here’ should be avoided at all costs: it makes no sense whatsoever when taken out of context. Here’s what this links list dialog displays for the BBC homepage in JAWS:

Seven Screen Reader Usability Tips

The good news is that the use of descriptive link texts provides usability benefits for everyone. When sighted users scan through Web pages, one of the items that stands out is link text. The words ‘click here’ are totally meaningless to Web users scanning pages; we must hunt through surrounding text to discover the link destination.

Tip 3: Provide Information in Lists

The use of lists within HTML code is extremely useful for screen reader users, as screen readers announce the number of items in each list before reading out the list items. This helps these users know what to expect when hearing a list of items (such as site navigation).

This facility works in much the same way as a phone answering machine that tells you how many messages you have before it plays them. Once you know how many messages you have, you know what to expect. If there’s only one or two messages, you can probably remember them; any more and you’ll probably want to get a pen and paper to make notes.

The use of lists (marked up with the <li> tag) really just represents a behind-the-scenes change to the code; it needn’t affect the visual appearance of your site.

Tip 4: Employ Logical Linearization

Screen reader users generally have to listen to Web pages from start to finish, top to bottom, left to right. Sighted Web users, on the other hand, can glance through a Web page almost at random, spotting important information wherever it may appear on the page. Because of this, important information should always be placed towards the top of the page. So, when you’re creating a form, for example, make sure you avoid locating instructions on how to fill it out at the bottom of the page.

Placing important information towards the top of the page actually benefits everyone, as the important information is then provided "above the fold" — in a position where sighted and screen reader users find it first.

Tip 5: Apply Short, Succinct ALT Text

ALT text is the textual content alternative that’s provided for images on a site. ALT text is read out to screen reader users, so any Website that offers even basic accessibility will provide this alternative text. However, some sites try to over-explain the information conveyed by images, forcing screen reader users to have to listen to a lot of unnecessary and irrelevant information.

Screen reader users often take longer than sighted Web users to work through Websites, so help make their surfing time easier with succinct ALT text.

Tip 6: Write Short, Front-loaded Paragraphs

In a "front-loaded" paragraph, the conclusion comes first, followed by the what, why, when, where and how. By placing the conclusion first, you allow screen reader users to instantly gain an understanding of what the paragraph’s about. They can then decide whether they want to keep listening to that paragraph, or skip to the next one (which they can do easily with the screen reader). If the paragraphs are short, users can skip forward knowing that they won’t miss extra information.

Front-loading content obviously benefits all users, as your site visitors no longer have to search around to find the main point of each paragraph.

Tip 7: Write Descriptive Page Titles

The page title is the very first thing that screen reader users hear when they arrive at a Web page, so it’s essential that the title is descriptive of the page. Again, this benefits everyone: all visitors can use the page title to orientate themselves and confirm that they’re on the page they expect, or want, to be on. This is especially true for Web users with dial-up connections over which the page title displays a number of seconds before the rest of the content.


We’ve explored a number of relatively simple, painless steps that can be taken to improve a site’s usability for screen reader users. Fortunately, nearly all of them improve usability for all Web users, so everyone benefits! Make these changes to your sites, and your users will thank you.


Category: Patterns & Practices Time: 2005-08-08 Views: 0

Related post

  • Usability tips for bloggers 2007-04-10

    Now this is an article that grabbed my attention straight away! Often when I think about web usability and usability heuristics I think about it from a commercial perspective. I think about my clients and the type of sites I would normally work on: F

  • Google Chrome Screen Reader App or Extension for Chrome OS 2010-12-16

    I am looking for a screen reader app or extension for the Google Chrome browser. This is specifically for Chrome OS so Java applets aren't an option, although Flash should be fine. Any suggestions? Update: Sometime in the last few days Chrome OS got

  • Apply the legibility principles to screen reading 2011-02-10

    How to apply the legibility principles to screen reading? What is important point for it? What is the difference between the "legibility" and "readability"? --------------Solutions------------- If you look at the dictionary definitions

  • Does Ocra screen reader come on Edubuntu by default? 2011-04-27

    I am working with visually impaired children in Kenya and would like to know if Orca screen reader comes with Edubuntu and whether it would work with the various educational packages on Edubuntu. Many thanks Martin Muckle --------------Solutions-----

  • Screen reader that logs text (for accessibility testing)? 2011-05-26

    Does anyone know of a screen reader for Windows that writes text to a log instead of actually reading it out? This is for accessibility testing. I know how to directly access the automation tree, but I want to be able to see what screen readers would

  • Using Visual Studio with a screen reader without paying for an expensive edition 2011-08-01

    I'm a totally blind programmer who would like to learn .net. It appears that the Visual Studio express editions are not accessible since the scripts that come with Jaws for Windows, the screen reading software I use, requires the VS object model to m

  • Screen Reading Browser add-on or Application 2011-12-06

    I need a good screen reading app that can read text in a browser window out loud to me quickly and clearly. I am looking for preferably a Firefox plugin but any browser will work... If it must be an application free is best. I use Windows 7 ---------

  • using sed, how to change the text on line seven to read seventh? 2012-10-12

    using sed, how to change the text on line seven to read seventh? Steve Blenheim:238-923-7366:95 Latham Lane, Easton, PA 83755:11/12/56:20300 Betty Boop:245-836-8357:635 Cutesy Lane, Hollywood, CA 91464:6/23/23:14500 Igor Chevsky:385-375-8395:3567 Pop

  • What are the options for automated testing of screen reader in Web apps? 2013-01-23

    Our team's resources are limited, still we need to make sure our site is accessible (government site, EU). Manual testing includes a lot of fiddling around with JAWS, sometimes other screen readers, Lunar Plus for visually constrained users etc. We w

  • How do I stop Orca Screen Reader? 2013-04-07

    I accidentally opened Orca Screen Reader from the Dash when I was trying to open Screenshot. Now everything I type or click on is spoken out loud. How do I make it stop? For reference, here is a screenshot of Orca Screen Reader running: -------------

  • What speech service does Orca Screen Reader use? 2014-01-12

    What speech service does Orca Screen Reader use? Is there any API to access it from an application? Like: function talk (text) { /* convert text to speech */ } ...or maybe via bash commands? talk "Hello World" Being a sofware developer I am inte

  • Is there a way of getting the clean layout of 'full screen reading' but without taking up the full screen? 2014-07-23

    I like the uncluttered appearance of the 'full screen reading' view - no scroll bars, status, ruler, tool bars etc. But I want to achieve the same thing, while Word only occupies part of my screen - so I can use, say, the other half of the screen to

  • Screen Reader turns on mistakenly 2015-02-22

    This question already has an answer here: How do I stop Orca Screen Reader? 9 answers Since the last update whatever I do anything on my system a sound erupts like if i change the brightness using F2 and F3 keys or change volume or open any drive or

  • Correct method for styling screen reader page text? 2015-03-29

    The following markup is rendered by WordPress' the_posts_pagination(): <nav class="navigation pagination" role="navigation"> <h2 class="screen-reader-text">Posts navigation</h2> <div class="nav-links

  • Possible to pin NVDA's screen reading to one application? 2015-06-21

    NV Access's screen reader does the job of reading e-books reasonably well; though, in my case I'd like to use it while multi-tasking. For example, I'd like it to continue reading from an e-book application or web article while I switch away to do som

  • Screen reader supporting the load of the html cite="" attribute 2015-09-22

    Is there a screen reader which is able to load url of thecite=attribute like many do for thelongdesc=attribute ? If yes, how to use it for that purpose (it's a global claim that browsers don't use the cite attribute but screen readers for blind peopl

  • How to read disabled swing components from Jaws screen reader 2016-01-20

    I am using following code : JTextField jtxt = new JTextField("Yahoo"); jtxt.setEnabled(false); When I make component disabled, JAWS screen reader skip reading the component. Is there any way we can still read disabled fields? --------------Solut

  • How to convey the "primary vs. secondary" button for screen reader users 2016-02-03

    I have an application that needs to be accessible for screen readers. This application uses bold text on primary button to convey information about the "recommended choice" like in the example below – Wireframes created with Balsamiq Mockups I a

  • screen reader jump from my accordion 2016-02-03

    I have an accordion which is written internally in our company. I am using this as part of new page. Now there is problem with it, which is consider as a bug/defect. The screen reader jump when it reach to accordion codes. and goes to next element. <

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.795 (s). 13 q(s)