Screen readers have become undeniably important for website visitors who are visually impaired. But screen readers alone aren’t enough. What happens if a screen reader works perfectly well but a site hasn’t been built to support it? When designing a website, it’s important to consider current ADA conformance guidelines and make your site accessible to those with visual impairments and other disabilities so that tools like screen readers can work as intended.
While users who rely on screen readers can’t visually scan a website, they can use keyboard shortcuts with screen readers to find what they’re looking for. Paying close attention to landmarks, headings and links when building a website will help ensure visually impaired users can navigate and understand your site.
Use landmarks to categorize page content
Landmarks are used to establish sections of a webpage, like the menu, banner, main content and footer. Those without disabilities can generally pick these out at first glance to determine where to go to accomplish a goal. In contrast, visually impaired users can do this by using screen readers to navigate via landmarks.
Consider the following representation of what the screen reader NVDA would read on a sample site when using landmarks to navigate. The user can see “skip links” at the top (Bypass Blocks), which jump to content farther down the page, followed by a header with helpful links, the main navigation, search and page content. It’s important to set up landmarks during web development so screen readers can easily identify the primary page sections and content types.
Leverage headings as intended
After using landmarks to get to the correct section of the page, visitors using screen readers will likely use a keyboard shortcut to start listening to headings. Headings work in the screen reader as they do visually: the heading should encapsulate what follows.
The structure of the above sample page is clear. A visitor can tell it’s about identity theft and offers a list of ways customers’ personal information will be protected.
However, headers can cause problems for screen readers when they are used to stylize text instead of delineating new sections. A content editor might want to highlight text within a passage and think, “The H2 is bold and larger; I’ll use that.” Unfortunately, what the editor has unintentionally done is introduced a word or phrase into the site structure where it doesn’t belong. This will make the structure confusing to a visitor using a screen reader.
Be clear about link destinations
When a visually impaired user navigates to a new site, the screen reader might use landmarks to get the lay of the land, then move onto headers to hear all the topics covered on a certain page. Next, the user will be ready to act and “tab” through the page to identify links. While this may seem straightforward, links can be confusing if they’re not set up to provide essential context for what the user will click to.
The example above demonstrates how a screen reader would interpret generic link names. Learn more about what? Read what? Request what? Visually, we might see “Learn More” accompanied by a title, subtitle and icon to tell us what we’re learning more about. With the screen reader, only “Learn More” is heard.
Below, you can see how a screen reader would interpret a library’s website featuring a list of books and links to learn more about each. While all the links say, “Click to see more,” this site has appended “about [book title]” for the screen reader. A developer has likely added the titles in the backend only, meaning they will not be shown on the page itself. And the driver for this was likely current WCAG guidelines.
It’s possible to make links meaningful without relying on a developer. Instead of making the link, “Learn more” and adding “about [product]” for the screen reader, a content editor can change the link on the front end to say, “Learn more about our promo rates” or “Read more about HELOCs.”
A large team of experts is involved in creating an ADA-conformant website. While accessibility guidelines may present additional considerations once the site is live, thoughtful implementation of landmarks, headers and link text can go a long way. Ongoing ADA scanning can also identify any issues with a site once it is live. To talk to a website accessibility expert at ZAG, contact us.
Disclaimer: This article has been prepared by ZAG Interactive to provide information of interest to our readers. It is not intended to provide legal advice. Please consult your own legal or compliance team for specific questions and concerns.