How to Make Your Website WCAG Accessible: A Practical Checklist
A practical checklist for meeting WCAG 2.2 AA standards. Covers color contrast, alt text, keyboard navigation, and free testing tools.
What Is WCAG?
WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. Published by the W3C, it defines how to make web content usable by people with visual, auditory, motor, and cognitive disabilities.
WCAG has three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Most legal requirements and industry standards reference WCAG 2.1 AA as the target. The latest version, WCAG 2.2, was published in October 2023 and adds criteria for mobile and cognitive accessibility.
According to the WebAIM Million study, 96.3% of the top million homepages have detectable WCAG failures. The most common issues are surprisingly simple to fix — starting with color contrast.
Color Contrast Requirements
Low color contrast is the #1 accessibility failure, affecting 86% of homepages. WCAG defines minimum contrast ratios between text and its background to ensure readability.
| WCAG Level | Normal Text | Large Text (18pt+) | UI Components |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | 4.5:1 |
Common offenders include light gray text on white backgrounds, placeholder text in form fields, and disabled button states. These all need to meet the minimum 4.5:1 ratio for normal-sized text.
Images and Alt Text
Every meaningful image must have descriptive alt text. Screen readers announce alt text to visually impaired users. Search engines also use it to understand image content.
Alt Text Guidelines
- Be specific: "Red Nike running shoes, side view" not "shoes"
- Be concise: Under 125 characters. Don't start with "Image of" or "Picture of"
- Describe function: For linked images, describe where the link goes, not the image
- Decorative images: Use empty alt (
alt="") for purely decorative images so screen readers skip them - Complex images: Charts and infographics need longer descriptions via
aria-describedbyor adjacent text
Keyboard Navigation
Every interactive element must be operable with a keyboard alone. Many users with motor disabilities cannot use a mouse. Others prefer keyboard navigation for speed.
- Tab order: Tab key must move through interactive elements in a logical order
- Focus indicators: Every focused element must have a visible outline or highlight
- No keyboard traps: Users must be able to tab away from any element
- Skip links: Provide a "Skip to main content" link at the top of each page
- Custom components: Modals, dropdowns, and accordions need proper ARIA roles and keyboard handlers
Accessible Forms
Missing form labels are the third most common accessibility failure, affecting 54% of homepages. Every form input needs a programmatically associated label.
- Use
<label for="id">elements for every input - Mark required fields with both visual indicators and
aria-required="true" - Display error messages inline near the field, not just at the top of the form
- Use
aria-describedbyto associate error messages with their fields - Don't rely on placeholder text as the only label — it disappears on focus
Quick WCAG AA Checklist
- All text has at least 4.5:1 contrast ratio (3:1 for large text)
- All meaningful images have descriptive alt text
- All form inputs have associated labels
- All interactive elements are keyboard accessible
- Focus indicators are visible on all interactive elements
- Page has a logical heading hierarchy (h1 → h2 → h3)
- Page language is declared (
<html lang="en">) - Links have descriptive text (not "click here")
- Videos have captions
- Content is readable at 200% zoom
Key Takeaways
- 96% of top websites fail basic accessibility checks — fixing the fundamentals puts you ahead
- Color contrast, alt text, and form labels are the three most common failures and the easiest to fix
- WCAG AA (4.5:1 contrast for normal text) is the standard most legal requirements reference
- Test with both automated tools and manual keyboard navigation
- Accessibility improves SEO, conversion rates, and legal compliance simultaneously
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is a set of international standards for making web content accessible to people with disabilities. WCAG 2.2 is the current version, published by the W3C. Most legal requirements reference WCAG 2.1 AA as the minimum standard.
Is WCAG compliance legally required?
In many countries, yes. In the US, the ADA has been interpreted by courts to apply to websites. The EU's European Accessibility Act requires compliance by June 2025. Many government, education, and e-commerce sites face legal requirements or risk lawsuits.
What is the minimum color contrast ratio?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
How do I test my website for accessibility?
Use a combination of automated tools (Lighthouse, axe DevTools, WAVE) and manual testing (keyboard navigation, screen reader testing). No automated tool catches all issues — manual testing is essential for things like logical reading order and meaningful alt text.
What are the most common accessibility failures?
The most common WCAG failures are: low color contrast (86% of homepages), missing alt text on images (58%), missing form labels (54%), empty links (49%), and missing document language (28%), according to the WebAIM Million report.