Quick Reference
Web Accessibility Principles
WebAIM Accessibility Testing Services
The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.
Note
This resource is designed to be printed as a one page PDF file. An HTML version is also available below.
Principles
Accessibility guidelines and techniques are based on four core principles:
- Perceivable - Available through sight, hearing, or touch.
- Operable - Compatible with keyboard, mouse, voice control, and other devices.
- Understandable - Easy to comprehend.
- Robust - Works across browsers, assistive technologies, mobile devices, etc. Follows standards.
Alternative Text
- Every non-text element needs a text equivalent (often conveyed in the
altattribute) to provide an alternative to the image content. - The
altattribute 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
alttext 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
- Color can enhance comprehension, but do not use color alone to convey information. Be especially cautious of red/green color combinations.
- Ensure that text, icons, and user interface elements have strong luminance contrast.
Forms
- Position form labels adjacent to or near their controls, so the labels are associated visually.
- Use
<label>to associate labels with controls programmatically. - Use
<fieldset>and<legend>to group related controls (like radio buttons) with a higher-level label. - Clearly identify required form elements. Don't make a field required if it is not necessary. Ensure all directions and cues are readily accessible.
- Ensure validation errors are obvious to screen reader users, and that users can easily make corrections and resubmit the form.
Links and Buttons
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.