Gauge your site's accessibility

If you’re involved in the design of a website, you have the greatest opportunity to make sure that your site is usable by everyone. But writers and editors can improve a site’s accessibility, too.

Some of the following guidelines, such as always including alternative text with images, are typically the responsibility of content creators. And writers and editors often contribute to a site’s design or redesign, which presents an opportunity to ask questions that lead site designers and stakeholders to consider accessibility.

Of course, making a website accessible can be daunting, especially if you start thinking about it late in the process. What to do? Where to begin?

The following short list of accessibility questions based on our experience at Yahoo! can help. These questions don’t address every possible consideration, because accessibility issues can be complex. But if you can answer yes to these questions, your project will be usable by most individuals with disabilities.

Audience

1. Did the people who built your site consider individuals with disabilities when they designed it?

A “yes” answer means that you are already halfway to making your site accessible. All too often, Web developers forget that people with disabilities may want to use the site, so accessibility features are never even proposed.

2. Did people with disabilities help or advise during the design and testing process?

Include children and adults with disabilities in your design and evaluation sessions. Not all disabled individuals are knowledgeable about website design, but they are certainly experts on their own experiences and will point out the parts of your site that they can’t use. It’s likely that they will identify design problems that you would not have discovered any other way.

Usability

3. Is your site easy to use without a mouse (in other words, with only a keyboard)?

For many people with disabilities, the mouse is either inaccessible or inconvenient. (Try using a mouse, for example, with your eyes closed or with one finger.) For them, a site is accessible only if it can be navigated with nothing but a keyboard. So make sure that you can navigate your site easily just by using combinations of the Tab key, arrow keys, and shortcut keys. It’s easy to test this: Just put your mouse in a desk drawer and see how far you get.

4. Do all the actionable elements on your site (input fields, buttons, radio buttons, checkboxes, and so forth) have text labels associated with them?

People who can’t see your site layout need an alternative way to orient themselves—for instance, to determine whether their onscreen cursor is filling in a checkbox or sitting in a search box waiting for them to type. These elements must be clearly labeled, with the label coded to be associated with the field, so that a screen reader will be able to identify the element. Otherwise, the site will be confusing at best, totally unusable at worst.

It’s easy to check whether input fields and other actionable elements on your site have useful labels. For example, does an address-entry box in which people type their city have the word City next to it? If so, great—but you’re not done yet. Is the label actually associated with the field? To check, click once on the word City. If the label has been properly associated with the City field, your cursor will show up in that field.

Example
Input fields with labels: The third field, labeled “Your Answer,” is associated with the label if the cursor appears in the input field when the user clicks “Your Answer.”

5. If your site uses CAPTCHA image verification, does it provide an alternative solution for visually impaired and deaf-blind users?

Example
CAPTCHA image verification

These misshapen characters are actually pictures of letters and numbers. They cannot be read aloud by a screen reader, which can read only text, not images. So, because blind people can’t hear that text, they can’t reproduce it to move on to the next step.

Alternatives to this kind of test can be provided to those who rely on screen readers:

• You can let the person respond by email.
• Misshapen characters can be replaced with questions that only humans can understand. Examples include simple logic puzzles such as:

Forty-two, Monday, 19, green, lamp: The color is ______.

Left is to right as up is to ______.

• The person can be asked to type letters and numbers that are spoken.

Visual and sound elements

6. Do all your site’s images have alternative text?

Alternative text, or alt text—a description of a graphic that enables a blind person to “see” the accompanying picture on a website—may be the simplest of all accessibility features to implement. Yet many people forget to include alt text with images. For best practices regarding alternative text, see “Alt Text and Image Captions.”

7. If your site has video content, do you provide closed captions for people who have hearing impairments?

Deaf viewers are unable to hear the audio portion of any video on your site. Without closed captions, they will miss important information. To understand how frustrating this can be, simply mute the sound on your own computer while browsing a site that has video.

Closed captions are useful not only for accessibility but also for making the video content of your site searchable. If search engines can find the text stored in your closed-caption files, then exponentially more Web users are likely to find your videos. (To learn more about search engine optimization, or SEO, see “SEO Basics.”)

Transcripts of videos can be useful for SEO as well, and they are a nice bonus if you want to provide them—but don’t consider them a replacement for closed captions.

8. If your site relies on color or visual effects to convey information, does it provide an alternative for colorblind people and people with limited vision?

Avoid communicating with site visitors through visual cues exclusively. Instructions such as “Click the green button to begin” or “Fields marked in bold are required” may be meaningless to an individual who is colorblind or who has impaired vision. If your design does, in fact, require a green start button, be sure to provide a text equivalent so that people who can’t see that color can understand which button is the start button.

9. If your site relies on spatial directions, do you offer alternatives for blind people and people with limited vision?

It makes little sense to direct a blind user to click the link located “to the right.” Where, exactly, is that? Phrase your instructions so that they don’t rely exclusively on the geography of your page layout. For example, you can say instead, “Use the links in the navigation bar.”

10. Is the text on your site readable for everyone?

What looks good and readable to you may be just the opposite for some people. For example, dark-blue links on a light-blue background do not provide adequate contrast for some. And not everyone can read 12-point type, let alone 10-point.

So how do you create a site that meets the needs of disabled individuals but conforms to your aesthetic vision and conveys your brand identity? By enabling your visitors to modify elements of your design. For instance, let people choose:

• Foreground and background colors
• Type size
• Link color