Six Ways Web Designers Can Improve Screen Reader UX

Screen Reader UXThere are over seven million legally blind people in the US and tens of thousands of legally blind children. A significant proportion use screen readers to access the Internet. Screen readers present online content through an audio interface, and they’re an essential line of communication and education to many who would otherwise be unable to use the Web with anything like the efficiency screen readers allow.

Screen readers are excellent at translating the visual medium of the web into verbal content, but poor web design practices can impact the user experience of visually impaired users. For the most part, adhering to established web design standards will ensure that your site works well with screen readers, but there are several best practices that can make a big difference to the experience of screen reader users.

Implement Consistent And Meaningful Content Hierarchies

Screen reader users can’t find their way around a site with visual cues, so they use the page hierarchy to find the content they are looking for. Screen readers present verbal menus of headings so that users can navigate to the information they need.

For that to work properly, headings must contain meaningful titles that are relevant to the content in the page section.

It’s worth noting that this is also a web design and SEO best practice, which illustrates a general point — making your site better for screen readers will make it better for other users, whether they’re human visitors or search engine crawlers.

Include Skip Links

By default, screen readers will start reading at the top of the page and move downwards. It’s important to understand that they start at the top of the HTML, not at the top of the content as it’s visually presented on the screen.

For almost every page that loads, screen reader users have to wait while the reader goes through the navigation menu. They can hop past items in various ways, but it’s an irritation that skip links can help avoid.

Skip links are simply links — invisible to most users — that let screen reader users know that the coming section of content is unlikely to be interesting and allow them to skip on to the meat of the page.

A typical implementation looks like this:

<div id="skiptocontent">
<a href="#maincontent">skip to main content</a>
</div>

One way of implementing skip links is as an ordinary link hidden with the CSS <display: none;> style. Many sites do this, but it’s not the best approach. Modern screen readers will also read the CSS, and any elements hidden from display will not be read by the screen reader. David Ball has a better solution for including skip links on pages.

Give Your Page A Meaningful Title

Screen readers will typically read out the content of a page’s title tags when the page first loads. If the title tag is full of irrelevant boilerplate content, it will be difficult for visually impaired users to determine whether the page’s content is useful to them.

Always Include Alt Text In Images

Screen readers will read the text contained in image alt tags. If there is no alt tag, the image will typically be ignored or the file name will be read instead (depending on the screen reader and its configuration).

The alt text should not be an essay explaining the image in minute detail, but it should contain a concise, relevant description.

Use Meaningful Anchor Text

Many screen readers can present a list of links on a page. They will read out the anchor text, and if the anchor text is simply “click here,” or “this article,” it’s impossible for visually impaired users to know where the link leads. The principle here is to make sure that links remain meaningful even when they don’t have the contextual clues provided by their placement on the page within other text.

Organize Content From Top To Bottom

Because screen readers deal with the HTML of a page, not it’s visual representation, it’s important that pages are organized in a linear fashion with the most important content at the top. This allows visually impaired users to quickly understand whether the page’s content will be useful to them, and along with logical and meaningful header hierarchies, allows the page to be quickly navigated.

I might just as well have called this article “Six Ways To Improve User Experience On Your Site,” because most of the steps I’ve outlined here are general web design best practices, but for people with visual impairments, the difference they make is more than one of simple UX enhancement — screen reader-friendly sites are crucial for making the web usable for millions of people.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED