Make Your Pages Accessible to the Visually Impaired
Accessible Web pages benefit everyone. The more accessible your content is, the more user-friendly it will be to all people, whether reading the page on a large screen or on a cell phone, or hearing the page read aloud by a screen-reader.
People who are visually impaired often rely on screen-readers to read Web pages. Screen-readers translate Web pages into plain text, which is either read aloud by a voice synthesizer or translated by a Braille device. Screen-readers read pages linearly, one element at a time. Most sighted people look at a whole page at once and unconsciously prioritize the content based on type-size, the prominence of graphics, and other visual cues. A screen-reader doesn’t allow the user to grasp a page in this holistic manner so quickly. Thus, when you create a Web page, you’ll want to organize and format your content so that it makes sense both holistically and linearly.
Here are some ways to make pages friendlier to screen-readers, and easier on the person going through your page one word, one image at a time.
Language and Structure
- Avoid “click here” links or vague link names. Screen-reader users often use a keyboard shortcut to list all the links on a page. In such a list, the links have no surrounding text. So make your link names descriptive. Instead of “Click here to see our President's Welcome,” say “See our President's Welcome.” Descriptive link names also make a page more “scannable” to sighted users.
- Reduce clutter. Crowded, overly busy pages are annoying to everyone, but they can be especially confusing and cumbersome to someone using a screen-reader.
- Use headers (H1, H2, etc.). A blind person can't see how large your headings are, so to provide some hierarchy among your information, use headers, which will be read by a screen-reader as “H1,” “H2” and so on. On Amherst's site, the H1 header is in the banner, so that Google's robots and other machines (including screen-readers) will see “Amherst College” as the first header on the page. The H2 header is the title of the article. So, in the body of your article, use H3 through H6 for your section heads.
- Use punctuation. Where you use commas and periods, voice synthesizers will produce cadences and pauses accordingly, making your sentences more understandable as they are read aloud.
- Keep your layout simple. Using tables for layout can introduce an illogical reading order when your page is read by a screen-reader. Please only use tables when you need to present geniunely tabular data, such as a chart with labeled columns and rows. If that’s the case, use “header” cells for the top row of cells and left column of cells, if applicable:
When a screen-reader encounters an image, it will say “graphic” or “image” and then read the image’s alternative (“alt”) text. If a graphic doesn't have alt text, the screen-reader will skip it. With this in mind, please:
- Include alternative text for all informative graphics.
- For graphics that are merely decorative, keep your alt text very brief or omit it.
- Read the WebAIM guide, Appropriate Use of Alternative Text.
- Make the first item in a pull-down menu instructive. For instance, say “Select Class Year” instead of “2013.”
Browser Text Enlargement
Some people with low vision use screen magnification software, but most people (including those with moderately low vision) rely on their Web browser's text enlargement features.
- Don’t use graphics where plain text will do just fine. Text can be enlarged by any browser and remain readable, while graphics may become jagged or blurry when enlarged.
- Don’t make your text unnecessarily small for aesthetic reasons. Keep in mind that while Amherst’s default fonts may seem large to some, font size varies tremendously across computers and devices. People with moderately low vision may not know how to enlarge text—they might just skip your tiny text.
Color and Contrast
- If you’re making graphics for your site, such as buttons with text on them, make sure the text stands out from the background color, and check it on a few different monitors.
- Don’t rely on color alone to convey information. For instance, if the only difference between two buttons is that one is green and the other is red, a colorblind person won’t know the difference between them.
- WebAIM’s Appropriate Use of Alternative Text.
- W3C Web Accessibility Initiative’s Web Content Accessibility Guidelines (WCAG) Overview.
- American Foundation for the Blind’s Tips & Tricks to Improve Web Accessibility.
- WAVE Web Accessibility Evaluation Tool—check your pages for accessibility problems.