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 7 simple-to-implement guidelines you can follow. They not only drastically improve usability for screen reader users, but for all web users too.
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 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.
According to drupal.org, Here are the best practices when using headings:
- Every page should have an h1 heading. Without an h1 the user has no simple way to learn what the page is about.
- Headings must be properly nested. Heading levels must not be skipped. For example, do not jump directly from h1 to h3.
- Headings are for structure, not formatting. Headings should be used to divide content into meaningful sections, not to format text.
2. Write 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.
For example, a screen reader user that reads an article on web usability may be interested to browse on a link on web accessibility. However, if the link text says, “Click here!”, the user may not realize that it is a link on accessibility. If it is written as “Learn more about Accessibility”, the user who has interest in accessibility will be able to locate the link and access it.
3. Present Information in 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 much 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 (marked up with the <li> tag) is simply a behind-the-scenes change to the code and needn’t affect the visual appearance of the website.
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 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. Apply 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 over-explain the information conveyed by the images, forcing screen reader users 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.
In the ALT text, typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. Also, do not use the phrases “image of …” or “graphic of …” to describe the image as it is usually apparent to the user that it is an image.
6. Write Short, Front-loaded Paragraphs
Front-loading is about placing the conclusion first, followed by the what, why, when, where and how. By placing the conclusion first, screen reader users can instantly grasp 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 using their 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. Write Descriptive Page Titles
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 canuse 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 few seconds before the rest of the page.
Here’s a quick checklist with some tips on writing the page title:
- List the most important identifying information first.
- Focus on creating brief, descriptive, concise and informative terms in the page title.
- Keep your important phrases short and simple.
We’ve explored a number of relatively simple, painless steps that you can use to improve a site’s usability for screen reader users. Fortunately, most of them improve usability for all web users. This means that everyone benefits – which is never a bad thing. Implement these tips on your website today, and your users will thank you.