University of Minnesota Duluth block M and wordmark
Information Technology Systems and Services

10 Web Accessibility Tips

Web accessibility refers to the practice of making the Web usable by people of all abilities and disabilities. The following tips are intended to help Web content authors, designers, and developers improve Web accessibility.

1. Use Real Headings

Diagram listing Heading 1 through Heading 6 in decending orderDocuments are easier to understand when they are structured and broken up into chunks, each identified with an appropriate heading or sub-heading that describes the content that follows.

For people with disabilities this can be especially important. Screen readers use shortcut keys to navigate around web pages, but in every case they rely on the real headings (not just big, bold, text) being in place to enable this functionality.

Headings only work effectively for everyone if you use real headings properly. Real headings are supported by most document formats, including HTML, Google docs, and Microsoft Word.

2. Use Text Alternatives for Images

Use alt text to provide access to the content of images for individuals who cannot see them, including people using screen readers, Braille output devices, voice recognition software. To determine what words to use for your short text alternatives consider:

Diagram: Short text alternative decision tree

The text used for the short text alternative should be a functional equivalent of the image. Alt text is supported by most document formats, including HTML, Microsoft Word, and Adobe PDF. Additionally for complex images a secondary long text alternative may be needed in order to provide an equivalent experience for all. Accessibility 104 Images: The short and long of it provides further information.

Icon: No Click Here A link that says "Click Here" or anything else that's very generic such as "follow this link" or "more information" is hard for some people to use because there's no content in that link nor a sense of what it actually does. The more generic the link, the more difficult the site is to navigate. "Click Here" forces the user to read the entire sentence to determine what can be found "here", increasing the amount of time needed to access information. It makes a big difference for users of assistive technology to have clear link text. People who use screen reading software can adjust their software to read only the links on a page. For this reason, links should provide enough information when read out of context.

Try whenever possible to make linking words or phrases part of a meaningful sentence, so that the user has a clear understanding of where they are going once they connect to another page. The link language should entice the reader to click, and the link itself should deliver on the promise.

4. Don't Rely on Color Alone

The majority of people who are color-blind can see colors. They just have difficulty distinguishing between certain colors. The colors with which they have difficulty distinguishing depend upon their type of color-blindness, but red and green deficiencies are the most common. For instance:

Comparison of normal vision and deuteranopia green deficiency in perceiving the colors: red, yellow, and green.

If you depend solely on color to communicate information i.e., "The correct answers are indicated in green" or "The wrong answers are indicated in red", color impaired users and users with devices that have non-color or non-visual displays will not receive that information.

5. Provide Accessible Videos

Icon: Closed Captions Utilize UMD's Captioning Service to caption your videos. Captions not only benefit the deaf and hard of hearing but also students with varying learning styles.

Post a transcript so individuals who are deaf-blind and those with low Internet bandwidth can access the content. Transcripts help all users by allowing them to access content quickly.

For people who are unable to see video, create a script that includes brief descriptions of important visual content, then provide that as a separate description track, either as timed text or recorded narration.

6. Be Mindful of Microsoft Word

Use heading styles, which can be customized. Headings will help structure documents for individuals using screen readers. Include alternative text for images. Don't save as a Web page.

Screenshot: Microsoft Word's style window
For more information consult WebAIM's Microsoft Word documentation.

7. Be Mindful of PDFs

Icon: AcrobatPDF preserves a document's appearance across operating systems and devices. If this characteristic is not essential, use HTML as it is usually more appropriate and accessible. If you do create PDFs use software that creates accessible PDFs, such as Microsoft Word (Windows only).

Tag your content and take steps to ensure that it will be read in the correct order. Adobe Acrobat has a built-in accessibility check that helps find accessibility errors in PDF documents. This option is under the "Advanced" menu.

Screenshot: Adobe Acrobat's Advanced Menu

PDF Techniques for WCAG 2.0 provides more techniques.

8. Be Mindful of Google Docs

Use heading styles, which can be customized. Headings will help structure documents for individuals using screen readers.

Screenshot: Google Docs' styles menu. Heading level 4 is selected. Levels 1 through 4 as well as normal text are options.

For read-only versions of a Google Doc, export it to a Microsoft Word document. Greg Kraus of North Carolina State University has developed a Google Doc to Microsoft Office Bookmarklet. It is a useful tool to convert a Google doc into a Word document. Don't create PDF files directly from Google Docs.

Warning

Know that some people will not be able to edit Google Docs online as Google Docs currently have accessibility barriers. For instance: "Labels for form elements are often reported incorrectly or not at all. Keyboard-only navigation is often difficult or impossible. Collaboration may be difficult for screen reader users and users with learning disabilities, as information may change or pop-up in a variety of locations."

9. Be Mindful of Google Sites

Again, use headings properly. Only insert text, links, lists, and images (with text alternatives) into Google Sites. To be accessible to people with disabilities Short Text Alternatives are Required not optional as the dialog box in Google Sites suggests.

Screenshot: of the Google Sites Add an Image dialog window (annotated)

In order to make your work inclusive to all use proper text alternatives.

Warning

Tables can't be made fully accessible in Google Sites. Know that some people will not be able to edit content within Sites and that Google Apps currently have accessibility barriers.

10. Learn More in Our Next eClass

To learn more join us for the ITSS Introduction to Web Accessibility eClass.