Simply ensuring your website is accessible to screen reader users
is unfortunately not enough to ensure 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 incredibly poor that they needn't have bothered coming
to your site.
Fortunately, there are plenty of simple-to-implement
guidelines you can follow, which not only drastically
improve usability for screen reader users, but for all web users:
1. Descriptive headings
The use of on-page headings is one of the most
important usability features for screen reader users, as it helps
them more easily understand the page structure.
Although text on the page may appear to be a heading for sighted
users, it must be labelled as a heading within the
HTML code for
screen reader users to know it is a heading.
Screen readers don't look at web pages - they
read through the HTML
code. If a piece of text is called a heading within the
HTML code then
the screen reader will announce that it's a heading. If not, screen
reader users won't actually know if something that visually appears
to be a heading is actually a heading.
Another usability benefit of using headings for
screen reader users, is that these users can call up a list
of on-page headings and jump to the section of the page in
which they're most interested. This works in much the same way as
sighted web users scanning through web pages by glancing at
headings. If headings are descriptive of the content contained
beneath them it becomes far easier for screen reader users to find
the information which they're after.
2. Descriptive link text
Screen reader users can browse through 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 as it makes no sense whatsoever out of context.
The good news is that the use of descriptive link
texts represents a usability benefit for everyone. When we scan
through web pages, one of the items that stands out to us is link
text. ‘Click here’ is totally meaningless to web users scanning
through pages and forces users to hunt through surrounding text to
discover the link destination.
3. Lists
Using lists within the
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 works in mush the same way as an answer
phone telling you how many messages you have, before listening to
them. By informing you of how many messages you have, you instantly
know what to expect. If there's only one or two
messages you can probably remember them; much more and you'll
probably want to get a pen and paper and make notes.
The use of lists (using the <li>
tag) is really just a behind-the-scenes change to the code and
needn't affect the visual appearance of the website.
4. 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 randomly, 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.
One example of how not to do this is to place
instructions for a form at the bottom of the page.
Placing important information towards the top of
the page actually benefits everyone, as the important information is
now in the place where sighted users look first - the top of the
page.
5. Short, succinct ALT text
ALT text is the alternative text for images that
gets read out to screen reader users. Any website offering even
basic accessibility will provide this alternative text. Some
websites 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.
6. Short, front-loaded paragraphs
Front-loading means placing the
conclusion first, followed by the what, why, when, where
and how. By placing the conclusion first, screen reader users can
instantly gain an understanding of what the paragraph's about. They
can then decide whether they want to keep on listening or if they
want to skip to the next paragraph (which they can easily do with
the screen reader). If the paragraphs are short, they can do this
safe in the knowledge that they won't be missing extra information.
Front-loading content obviously benefits
everyone, as web users no longer have to search around for the main
point of each paragraph.
7. Descriptive page title
The page title is the very first thing
that screen reader users hear when arriving at any web
page, so it's truly essential that it's descriptive of the page.
Again, this benefits everyone as users can use the page title to
orientate themselves and confirm that they're on the page they think
they're on. This is especially true for web users on dial-up
connections where the page title displays a number of seconds before
the rest of the page.
Conclusion
There are a number of relatively simple and
painless things that can be done to improve usability for screen
reader users. Fortunately, nearly all of them improve usability for
all web users, meaning everyone benefits - which is never a bad
thing.