WCAG 2.1 AA (Web Content Accessibility Guidelines) defines 50 success criteria for accessible websites, organized under four core principles: perceivability, operability, understandability, and robustness. Since June 2025, this standard is legally binding for many companies in Germany through the BFSG. The most important technical requirements include keyboard navigation, contrast ratios of at least 4.5:1, descriptive alt texts, correct form labeling, and visible focus indicators. With systematic implementation, accessibility and Accessibility can be sustainably integrated into existing projects.
What Are the WCAG 2.1 Core Principles?
WCAG 2.1 is based on four core principles, summarized as POUR. Each success criterion can be assigned to one of these four areas – they form the foundation for any conformant implementation.
- Perceivable: All content must be perceivable by users – regardless of sensory impairments. This includes text alternatives for images, subtitles for videos, and sufficient color contrasts.
- Operable: The entire user interface must be keyboard-operable. Users with motor impairments must not be dependent on mouse or touch interaction.
- Understandable: Text and controls must be clear and predictable. Errors in forms must be described and input assistance offered.
- Robust: Content must be reliably interpretable by current and future assistive technologies – valid HTML and ARIA usage are crucial here.
WCAG 2.1 AA comprises 50 success criteria at conformance levels A and AA. Level AAA is not mandatory for most websites but is recommended for specific areas such as government sites. Important: Progressive Enhancement as a development strategy structurally supports WCAG conformance – content works first without JavaScript, enhancements are added progressively.
Technical WCAG 2.1 AA Requirements Overview
These requirements are the critical implementation points for most projects at the AA level:
- Keyboard navigation: Every interactive element (links, buttons, forms, modals) must be reachable via the Tab key and activatable via Enter/Space. The tab order must logically follow the visual reading order.
- Contrast requirements: Text at 4.5:1 contrast ratio (AA), large text from 18pt at 3:1. UI components and graphical elements also require 3:1 against the background.
- Alt texts for images: Informative images need descriptive alt text. Decorative images receive alt="" (empty alt text) – never omit it.
- Form labels: Every input field requires a programmatically associated <label> element or aria-label. Placeholder text alone is not sufficient.
- Focus visibility: The keyboard focus must be visible at all times. Never set outline: none without a replacement.
- Skip links: A 'Skip to main content' link as the first element on every page allows keyboard users to bypass navigation.
- lang attribute: <html lang="de"> is mandatory – screen readers need the language information for correct pronunciation.
- Heading hierarchy: H1–H6 must be logically structured. No H3 without a preceding H2.
Testing Accessibility: Tools and Methods
No single tool covers all WCAG criteria. A thorough evaluation combines automated tests, manual testing, and real user tests. As part of the monitoring process, accessibility should be continuously checked – not just once before launch.
Automated Tools
- axe DevTools (browser extension): Automatically detects ~30–40% of all WCAG issues. Free, no false-positive problem, usable directly in Chrome/Firefox.
- WAVE (WebAIM): Visualizes accessibility issues directly on the page. Particularly helpful for alt text checking and contrast errors.
- Google Lighthouse: Accessibility score in the audit tab. Good as a starting point and for CI/CD integration. However, it covers only a fraction of WCAG.
- Pa11y: CLI tool for automated tests in the build pipeline. Ideal for regression testing after deployments.
Manual Testing
- Keyboard-only navigation: Navigate the website entirely without a mouse. Check: Are all interactive elements reachable? Is the focus order logical? Can modals be closed with Escape?
- Screen reader test with NVDA (Windows, free) or JAWS: Have the page read aloud and verify that structure, forms, and images are communicated meaningfully.
- Zoom to 200% and 400%: Content must not be cut off. Responsive layout must work even at high zoom levels.
- Check color contrast manually: Use the Contrast Ratio Checker (WebAIM) or the Colour Contrast Analyser tool for all text-background combinations.
Common Mistakes in WCAG Implementation
Even with well-intentioned implementations, the same mistakes recur – often because accessibility is treated as an add-on rather than an integral part of the design. A Responsive Design approach that considers accessibility from the start avoids the majority of these issues.
- Missing focus styles: CSS reset with outline: none removes focus indicators without a visible replacement. Fix: :focus-visible with a prominent ring for all interactive elements.
- Incorrect heading hierarchy: H3 as the first heading after H1 because it looks right visually. Screen readers navigate by headings – a faulty hierarchy makes the structure unusable.
- Decorative images with descriptive alt text: A background image with alt='Colorful pattern' confuses screen reader users. Decorative images: set alt="".
- Only testing automatically and calling it 'accessible': A Lighthouse score of 100 does not mean WCAG-compliant. Without manual tests, no conformance statement.
- Incorrect ARIA usage: aria-hidden="true" on focusable elements, role="button" on div without tabindex="0". Rule: use native HTML first, ARIA only when necessary.
- Color as the only distinguishing feature: 'Red = error, green = success' without additional icons or text excludes colorblind users.
- Missing time controls for animated content: Carousels or auto-play videos without a pause option violate WCAG 2.2.1.
Summary
- WCAG 2.1 AA has been legally binding for many companies in Germany since 2025 through the BFSG.
- The four POUR principles (Perceivable, Operable, Understandable, Robust) form the foundation of all 50 AA success criteria.
- Critical technical requirements: keyboard navigation, 4.5:1 contrast ratio, alt texts, form labels, visible focus, skip links, lang attribute.
- Test in three layers: automated (axe, WAVE, Lighthouse) + manual (keyboard, NVDA) + user tests with affected individuals.
- Most common mistakes: missing focus styles, incorrect heading hierarchy, ARIA misuse, only testing automatically.
- Accessibility as a process, not a one-time project – continuous monitoring after every deployment.
