Make Your Amherst.edu Webpages 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 can be hard for anyone to read, but they can be especially confusing and cumbersome to someone using a screen-reader.
- Use headings (Heading 1, Heading 2, etc.). A blind person can’t see how large your headings are, so to structure your information hierarchically, use headings, which will be indicated as such by a screen-reader.
- 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 graphics that have words in them or that provide a visual cue.
- 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 “2018.”
Browser Text Enlargement
Some people with visual impairments use screen magnification software, but most people rely on their browser’s zoom features or their font size preferences.
- Please don’t use graphics for text when plain text will do just fine. Text can be enlarged and remain readable, while graphics may become jagged or blurry.
- If you need buttons for your site, please contact Willa Jarnagin in the Office of Communications, who can provide styled text buttons.
- Refrain from making your text smaller because you think it looks nicer that way. Keep in mind that while Amherst’s default fonts may seem large to some, font size varies across computers and devices. Your audience might not know how to enlarge text, or might not bother—they might just skip your tiny text.
Color and Contrast
- If you’re making a graphic, make sure the text stands out from the background color, and check it on a few different screens, including mobiles.
- 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.