Web Accessibility for Developers -- Part Two

May 14, 2015
1

We’re at the halfway point of what hopefully has been a helpful guide for developers to make a website accessible for all visitors. (If you missed the first part of this two-part series, please click here.)

In this blog, we’ll review how instructional text, navigation, and other parts of development can allow those with blindness and low vision, deafness, and other disabilities to make full use of a website.

There’s a Proper Place for Instructional Text

When providing an example that will help the user fill out a field, place it after the label of the field and before the field itself. This will let the screen reader pinpoint the instructional text and leave no doubt to the user that they’re hearing an example of what’s required. For instance, an example of how to enter the country code and remaining digits of a telephone number should come just before the field.

A Search that Searches When Instructed

Many people love filters that are dynamic — offering results after each selection is made — but it’s not the best thing for a text reader. Dynamic searches cause the page to constantly refresh, leaving a visitor who’s using a text reader to wonder what’s going on. A page shouldn’t reload until the user hits a button. That means all filters and search functionality should have “submit,” “go,” and “apply” buttons.

Jump Directly to Main Content

Readers without disabilities probably take it for granted that they can jump directly to the main content on a webpage. But for those using a screen reader, they first have to listen to a long list of navigation links, icons and other elements before reaching the main content. That’s where a “skip to main content” link comes in handy. It allows a user to skip everything at the top of the page.

The good news for developers using Drupal is that the “skip to main content” link is beginning to come right out of the box and is already included in some themes. If it’s not included, don’t worry. The code in your template should look similar to:

<a class="element-invisible element-focusable" href="#main-content" id="skip-link">Skip to main content</a>

The CSS code should make the link invisible to a sighted user but will allow a screen reader to focus on the link.

An Easier Way to Zoom and Shrink

Visually impaired people who don’t need a screen reader still may need to manipulate the size of text. They don’t always know how to use keyboard shortcuts and need a user-friendly aid. In a matter of minutes, a site administrator can plop a text-resizing module onto a Drupal webpage. Here’s a handy helper on how to do it. Just keep in mind that it doesn’t always work for menu items, but it usually does resize static text.

Know What to Show; What to Hide

CSS allows developers to change the style of a webpage and make content sparkle. But some text-based screen readers or older screen readers need to read the page with all of the styles disabled. It’s important to make sure that if the stylesheets are turned off, the screen reader will still be able to read the order of the content correctly and be able to access all functionality.

Most of the responsive Drupal themes are already providing this functionality out of the box, but this standard is important to think about, and test when choosing how you will lay out your pages.

In order to test, disable your stylesheets — as seen in this screenshot of a White House page, for instance — and scroll down the page to ensure that the content order is the same as you originally intended.

white house screenshot

These are only a few steps that can help developers make a website accessible to all visitors. If you’d like to see more ideas — or perhaps even gain a greater understanding of Web accessibility itself — here are two resources worth checking out:

The first is a checklist of standards from Section 508 of the federal Rehabilitation Act that government agencies must follow to provide full and fair Internet access to people with disabilities. Even though only federal agencies are required to follow them, the standards serve as a thorough and detailed source of steps for businesses and organizations to use.

Another useful resource are the Web Content Accessibility Guidelines offered by the World Wide Web Consortium (WC3). The guidelines are comprehensive and should also help you on the way to creating an accessible website.

Thanks for reading. Please leave a comment below if you have other suggestions you’d like to share.

Down the road, we’ll post a companion, two-part series on accessibility for clients – stay tuned.

Sign-up for our Developer Blog Newsletter

Thanks!

Add comment

By submitting this form, you accept the Mollom privacy policy.