Accessible webpages 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-reading software 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. (Descriptive link names also make pages more scannable for sighted users.)
- Reduce clutter. Crowded, 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 person who can’t see your headings can’t discern their relationship to surrounding content based on visual cues such as type size (does this heading refer to the whole page, or to this subsection?). To structure your information hierarchically, use headings.
- In Amherst’s website editor, the page name (the same name as the navigational name in the left column) will automatically be an H1, and an article title (taken from the Title field inside the article) is an H2. Within the body of an article, use headings 3-6.
- Keep your formatting simple. Use headings, paragraphs, and bulleted lists. Be selective about which information to make prominent.
- Use tables selectively. Please use tables only when you need to present information that needs corresponding columns and rows, such as a chart or a complex schedule. When creating a table, be sure to use “header” cells where appropriate (usually the top row and left column).
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 descriptive alt text for all graphics that convey information, whether it’s an icon or a photograph.
- For graphics that are merely decorative, keep your alt text very brief (since our system requires alt text), or consider removing the image.
- Avoid making graphics containing text. Use regular text instead.
- Read the WebAIM guide, Appropriate Use of Alternative Text.
Amherst’s web forms are designed to be accessible, whereas forms created in PDFs or Word documents will vary in their accessibility. Please contact IT for help setting up a form on your site.
Generally, PDFs are not as accessible as our webpages (depending on the complexity of the document structure). If the information in your document can be pasted into a regular web article, please do so.
While it might be tempting to upload a ready-made poster as a PDF, please consider that the information might not be accessible. A regular web article containing the poster’s image (with alt text) and information set in headings, paragraphs, and bullets will be accessible, and will present well visually, due to the high quality of our website’s fonts.
Statistical Charts and Infographics
The more you can keep your charts simple—such as by using proper HTML tables (see above)—the more accessible your information will be. Infographics are acceptable if their information can be completely conveyed in the image’s alt text; otherwise, you might break up the graphic into a combination of images (with alt text) and text.
Complex statistical graphs can present accessibility challenges. Please contact IT for help.
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. Also, the text might not be high enough in contrast.
Buttons and Low Vision or Color Blindness
Buttons can present problems if their text isn’t high enough in contrast for someone with low vision, or if the colors are not distinguishable to someone with color blindness.
- Please refrain from making your own buttons. Instead, use our design components with built-in buttons, or contact Willa Jarnagin in the Office of Communications, who can provide styled text buttons.
- WebAIM’s Appropriate Use of Alternative Text and Accessible Images.
- 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.
See how many accessibility problems you can identify on our accessibility workshop’s example of an inaccessible page, and then learn how to fix them.