Making web sites accessible

Tags Web

Summary

Accessibility is about ensuring all users, including those with disabilities, have equal access to the content of the website, regardless of how they access it. They may use:

  • Screen reading software which reads the page to the user
  • Magnification software that enlarges the screen
  • Speech recognition software that allows users to control the page with voice commands
  • Alternative input devices that mimic a standard keyboard
  • Refreshable braille displays which transform the content into braille

Common elements that need to be accessible include:

  • Images — Graphics all need to include “alternative text,” an invisible code embedded to make it possible for assistive technologies to access information that explains the content of the image.
  • Videos — Text transcripts or captions of videos should be made available.
  • Colors — The colors of all elements on the site should be sufficiently contrasting so that information is easy to read. Additionally, any information in color (such as graphs and buttons) should be labeled in such a way that users can understand the color information without color.
  • Form labels — All forms with editable fields should be clearly labeled outside of the field itself. For example, a search bar should have a “ Search” label before the field itself instead of inside the field box or after.
  • Stylesheets — Website stylesheets are used to control a site’s layout and presentation and should be specially coded to ensure the site’s presentation is optimally retained. Stylesheets should also use relative rather than absolute units.
  • Keyboard — All content functions should be operable through a keyboard interface, such as using unmodified arrow or tab keys

The Web Content Accessibility Guidelines (WCAG) 2.1 standard has 4 principles, broken down into 12 guidelines, each of which have success criteria whose conformance can be rated as A (must satisfy), AA (should satisfy), or AAA (may satisfy). The mnemonic for the principles is "POUR:"

  • Content must be Perceivable:
    1. Provide text alternatives for any non-text content.
    2. Provide alternatives for time-based media.
    3. Separate content from style.
    4. Make it easier for users to see and hear content.
  • Interface components in the content must be Operable:
    1. Make all functionality available from a keyboard.
    2. Provide users enough time to read and use content.
    3. Do not design content known to cause seizures.
    4. Provide ways to help users navigate, find content, and determine where they are ("breadcrumbs").
  • Content and controls must be Understandable:
    1. Simplify text content.
    2. Web pages need to operate in predictable ways.
    3. Help users avoid and correct mistakes.
  • Content should be Robust enough to work with current and future assistive technologies:
    1. Maximize compatibility with other products, including assistive technologies.

Environment

Any websites and applications, including the LSA TS KB.

Directions

To make your web site generally accessible perform the following steps:

  1. Fix the easy stuff first:
    • Provide alt text for all images.
    • Use alternative formats for graphics.
    • Correctly label links (avoid "click here"-style syntax).
    • Always follow best practices for web development:
      • Simplify pages (language, design, navigation).
      • Use a resizable, clear font face.
      • Provide a consistent navigation.
      • Provide contact information.
      • Load pages quickly.
      • Verify code, hyperlinks, spelling, and stylesheets.
  2. Address low-vision users:
    • Whenever possible use vector formats (such as .ai, .eps, or .svg) for complex images; without pixels users can zoom to their desired level of magnification without content loss.
    • Use high-contrast modes.
    • When choosing colors, consider color contrast:
      • Transparency in the background can cause alternative contrast ratios.
      • For large text (18-point or larger) use 3:1 (AA) or 5:1 (AAA); for small text use 5:1 (AA) or 7:1 (AAA).
  3. Consider color-blindness: Color should never be used to define meaning within content. Red-green color blindness is the most common and is often used in data visualizations (such as heatmaps).
  4. When using diagrams, charts, and graphs, ensure there are textual alternatives for all content: Text numbers in graphs, patterns to provide visual but non-color identifiers, and provide a textual description of important findings.
  5. When working in raw markup, use Accessible Rich Internet Applications (ARIA) accessibility attributes whenever possible.
  6. Test your website with an external verification tool or submit a U-M Web Accessibility Website Evaluation Request.

Resources

U-M Internal Resources

External Resources

Print Article