WCAG 2.1 Standards Guide
Complete guide to Web Content Accessibility Guidelines (WCAG) 2.1 Level AA standards, with practical examples and testing procedures for public institutions.
WCAG Conformance Levels
Level A (Minimum)
Basic level of accessibility
Essential accessibility features that all websites should meet
Level AA (Standard)
Standard level required by most laws
Required by ADA, Section 508, and most international laws
Level AAA (Enhanced)
Highest level of accessibility
Not required by law but provides the best user experience
The Four Principles of WCAG
Perceivable
Information must be presentable in ways users can perceive
1.1 - Text Alternatives
Provide text alternatives for any non-text content
1.2 - Time-based Media
Provide alternatives for time-based media
1.3 - Adaptable
Content can be presented in different ways without losing meaning
1.4 - Distinguishable
Make it easier for users to see and hear content
Operable
Interface components must be operable by all users
2.1 - Keyboard Accessible
All functionality available via keyboard
2.2 - Enough Time
Users have enough time to read and use content
2.3 - Seizures and Physical Reactions
Content does not cause seizures or physical reactions
2.4 - Navigable
Users can navigate and find content
2.5 - Input Modalities
Make it easier for users to operate functionality
Understandable
Information and UI operation must be understandable
3.1 - Readable
Make text content readable and understandable
3.2 - Predictable
Web pages appear and operate in predictable ways
3.3 - Input Assistance
Help users avoid and correct mistakes
Robust
Content must work with various assistive technologies
4.1 - Compatible
Compatible with current and future assistive technologies
Accessibility Testing Checklist
Keyboard Testing
- Navigate entire site using only Tab, Shift+Tab, Enter, and Space
- Ensure all interactive elements are reachable via keyboard
- Verify no keyboard traps exist
- Check that focus indicators are clearly visible
Screen Reader Testing
- Test with NVDA (free) or JAWS screen reader
- Verify all images have meaningful alt text
- Check that headings create a logical outline
- Ensure form labels are properly associated
Visual Testing
- Check color contrast meets 4.5:1 ratio (normal text) or 3:1 (large text)
- Verify content works when zoomed to 200%
- Test that color is not the only way to convey information
- Check text spacing and readability
Automated Testing
- Run axe-core accessibility scanner
- Use WAVE web accessibility evaluator
- Check with Lighthouse accessibility audit
- Validate HTML markup
Quick Accessibility Wins
Add Alt Text to Images
Add descriptive alternative text to all images
<img src="logo.png" alt="AuditAble - ADA Compliance Made Simple" />Improve Color Contrast
Ensure text meets 4.5:1 contrast ratio
/* Use tools like WebAIM Contrast Checker */Add Skip Links
Allow keyboard users to skip to main content
<a href="#main" class="skip-link">Skip to main content</a>Label Form Inputs
Associate labels with form controls
<label for="email">Email Address</label>
<input type="email" id="email" name="email" />Fix Heading Structure
Create logical heading hierarchy (h1, h2, h3...)
<!-- Use only one h1 per page, then h2, h3 in order -->Recommended Testing Tools
Free tools to help you test and improve accessibility