Making web sites accessible

Tags Web

Summary

Web accessibility ensures that all users, including people with disabilities, can access and use LSA websites and applications regardless of how they interact with the web. Users may rely on assistive technologies such as:

  • 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

Accessibility is not optional. It is a shared responsibility and a core requirement for all LSA digital content.

Common Elements That Must Be Accessible

  • Images — All images must include meaningful alternative text so assistive technologies can convey the purpose and content of the image.
  • Videos —Videos must include captions. Audio content must have transcripts. This applies to embedded media, recorded lectures, and promotional content.
  • Colors — Color must never be the only way information is communicated. All text and interactive elements must meet contrast requirements so content remains readable for low vision and color blind users.
  • Form labels — Every form field must have a clear label outside the field itself. Placeholder text alone is not sufficient.
  • Stylesheets and layout — Pages should use relative units, flexible layouts, and semantic structure so content adapts to different devices and assistive technologies.
  • Keyboard access — All functionality must be usable with a keyboard alone using standard keys such as Tab, Enter, and arrow keys.

WCAG 2.1 and the POUR Principles

The Web Content Accessibility Guidelines (WCAG) 2.1 standard has 4 principles, each of which have success criteria whose conformance can be rated as A (must satisfy), AA (should satisfy), or AAA (may satisfy). 

LSA follows the WCAG 2.1 AA standard as required by the University of Michigan.

WCAG is organized around four core principles known as 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. Use clear and simple language
    2. Ensure predictable navigation and behavior
    3. Help users avoid and correct errors
  • Content should be Robust enough to work with current and future assistive technologies:
    1. Use valid, semantic markup
    2. Maximize compatibility with 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.

Testing and Support

Before publishing, test your content using both automated tools and manual checks to identify and resolve accessibility issues early.

At LSA, Siteimprove is the primary web accessibility testing and monitoring tool. Siteimprove scans LSA websites for WCAG 2.1 AA issues and provides clear guidance on what needs to be fixed and how.

If you need support:

LSA Technology Services can help you review results, prioritize fixes, and determine next steps based on Siteimprove findings.

Resources

U-M Internal Resources

LSA Resources

External Resources

Print Article