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 webpages. Screen-readers translate 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, 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 2, Heading 3, and so on). 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.
- Keep your formatting simple. Use headings, paragraphs, and bulleted lists. Be selective about which information to make prominent. Brief paragraphs, written well, are a wonder of clarity. Boldface is overrated.
- Beware of tables. Please use tables only 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 alt 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.
- 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 regular 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.
- 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.