BYD TechThe short answer
WCAG, the Web Content Accessibility Guidelines, is the W3C standard for making websites and apps usable by people with disabilities. It is organized under four principles, perceivable, operable, understandable and robust, with testable success criteria at three levels: A, AA and AAA. The current version is WCAG 2.2. Most organizations and laws point to level AA as the target.
Key points
- WCAG is published by the W3C. The current version is 2.2.
- Four principles: perceivable, operable, understandable, robust.
- Three levels: A is the minimum, AA the common target, AAA the strictest.
- Most issues are found and fixed in design and front-end code.
- Automated tools find some problems. Testing with a keyboard and a screen reader finds more.
What WCAG is
The Web Content Accessibility Guidelines are written by the World Wide Web Consortium. WCAG 2.2 was published in October 2023 and is the current version. A future WCAG 3 exists only as an early draft. Each guideline has success criteria that can be tested, which is what makes it usable as a standard.
The four principles
| Principle | Means | Examples |
|---|---|---|
| Perceivable | People can see or hear the content in some form | Alt text, captions, enough color contrast |
| Operable | People can use every control | Full keyboard use, visible focus, no time traps |
| Understandable | Content and behavior make sense | Clear labels, helpful errors, predictable navigation |
| Robust | It works with assistive technology | Correct HTML, named buttons and fields |
Levels A, AA and AAA
- Level A: the minimum. Without it, some people cannot use the product at all.
- Level AA: the common target, and the level most policies and laws refer to.
- Level AAA: the strictest. Rarely required for a whole site, but useful for specific content.
Whether a law applies to your product depends on where you operate and who your customers are. Check the rules for your markets rather than assuming.
The issues teams hit most often
- Text without enough contrast against its background.
- Images with no text alternative.
- Form fields without labels, and errors that are not announced.
- Controls that cannot be reached or used with a keyboard.
- No visible focus outline.
- Buttons and links with no accessible name, such as an icon alone.
How to start
- Build it into the design: check contrast and states while screens are being designed.
- Use correct HTML elements. A real button beats a styled box with a click handler.
- Run an automated checker on key pages to catch the obvious problems.
- Use the product with only a keyboard.
- Try the main flows with a screen reader.
- Fix issues in shared components, so each fix applies everywhere.
Solving accessibility once, in the components, is one of the strongest arguments for a design system. See What is a design system?. Accessibility checks are also part of a UX audit and our UI/UX design work.
Sources
Checked when this guide was written.
