WebAIM - Web Accessibility In Mind

Quick Reference
Web Accessibility Principles

Principles

Accessibility guidelines and techniques are based on four core principles:

  • Perceivable - Available through sight, hearing, or touch.
  • Operable - Compatible with keyboard or mouse.
  • Understandable - Easy to comprehend.
  • Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.

webaim.org/articles/pour/

Alternative Text

  • Every non-text element needs a text equivalent (often conveyed in the alt attribute) to provide an alternative to the image content.
  • The alt attribute should present the content and function of an image, but not necessarily a detailed description.
  • If an image is decorative, or redundant to nearby text, it should have empty alternative text (alt="").
  • If an image is a link or hotspot, the alt text must describe the link’s function.
  • Words like "picture of," "image of," or "link to" are redundant. Screen readers already identify images and links by default.
  • Ensure alternative text is as succinct as necessary.

Readability

  • Use the simplest language appropriate to your content and audience.
  • Use white space (line length, text spacing) to improve readability.
  • Supplement text with images and icons.
  • Check spelling, grammar, and reading grade level.

Data Tables

  • Identify data table headers with <th scope="col"> for column headers and <th scope="row"> for row headers.
  • If appropriate, add a <caption;> for the data table.

Color

Forms

Multimedia

  • Videos and live audio must have captions and a transcript.
  • Captions must be synchronized, equivalent, and accessible.
  • Archived audio must have a transcript.

Documents

  • For the most robust accessibility, use HTML instead of proprietary document formats.
  • When only a document will do, PDF, Word, PowerPoint, and Excel provide basic accessibility features.
  • If document content cannot be made fully accessible, provide an accessible alternative.
  • Test document accessibility in a screen reader.

Miscellaneous

  • Ensure that content reflows without breaking layout up to 400% zoom (from a 1280 pixel wide viewport).
  • Ensure responsive layouts and structures are keyboard accessible.Provide a descriptive page <title>.
  • Ensure functionality available to mouse users is also available via the keyboard.
  • Make all scripted and dynamic content, dialog pop-ups, and page widgets available to screen readers. ARIA, when used appropriately, can be helpful.
  • Ensure the web page language is defined (e.g., <html lang="en">).
  • Implement and test to the Web Content Accessibility Guidelines.