Compliance Series • Post 15/20
WCAG 2.1 AA — the 9 Most Important Checkpoints for SME Websites
The Web Content Accessibility Guidelines (WCAG) 2.1 AA are the technical standard for accessible websites. This guide filters the 50+ success criteria down to the 9 that really matter for SME websites.
TL;DR
- WCAG 2.1 AA — the 9 Most Important Checkpoints for SME Websites — a practical guide for the DACH region.
- Covers "wcag sme" with concrete examples.
- Covers "wcag checkpoints" with concrete examples.
- At least 2 snippet-bait patterns for better SERP visibility.
WCAG 2.1 AA (Web Content Accessibility Guidelines) is the international W3C standard for accessible web content. Level AA is the legally required minimum level in the DACH region, covers 50 success criteria and is evaluated by automated audit tools and manual testing.
Reducing the 50 criteria to 9
Not all 50 WCAG 2.1 AA criteria are equally relevant for SME websites. A pure marketing site without webshop, video or user login reduces the required scope to 9 criteria:
The 9 WCAG checkpoints that matter for every SME website
- 1.4.3 Contrast (Minimum) — 4.5:1 for text, 3:1 for large text
- 1.1.1 Non-text Content — Alt text for all images and icons
- 2.1.1 Keyboard — Everything reachable via Tab, no keyboard traps
- 2.4.3 Focus Order — Logical tab order in DOM
- 2.4.7 Focus Visible — Clear visual indicator during keyboard navigation
- 3.3.2 Labels or Instructions — All form fields have linked labels
- 1.3.1 Info and Relationships — Semantic HTML structure (h1–h6, lists, tables)
- 1.4.4 Resize Text — 200% zoom without horizontal scrollbar
- 3.2.3 Consistent Navigation — Menus identical across all pages
Testing with the right tool mix
- Lighthouse Accessibility covers criteria 1–8 automatically
- WAVE Extension (WebAIM) shows violations visually directly on the page
- axe DevTools (Deque) detailed WCAG error analysis per element
- Manual screen reader test: NVDA (Windows) or VoiceOver (Mac) — takes 15 minutes
The 9 checkpoints explained
1.4.3 Contrast (Minimum)
Text must have a contrast ratio of at least 4.5:1 against its background. Large text (18px+ or 14px+ bold) requires 3:1.
How to test: Use a color contrast analyzer. Browser extensions like “Colour Contrast Analyser” pick colors directly from the page.
Common mistake: Light gray text on white backgrounds looks elegant but fails. Our brand colors in tailwind.config.mjs each have a *-strong variant for body text use.
1.1.1 Non-text Content
All images, icons and graphical elements need alt text. Purely decorative images get alt="".
How to test: Run Lighthouse. It flags all <img> without alt attribute.
Common mistake: alt="image" or file names like alt="DSC_1234.jpg". Write descriptive text: alt="mekyn dashboard showing SEO audit results".
2.1.1 Keyboard
All interactive elements must be reachable and usable via keyboard alone. No keyboard traps (where focus gets stuck).
How to test: Unplug your mouse. Can you navigate the entire site with Tab, Shift+Tab, Enter and Esc?
Common mistake: Custom dropdowns, modals or carousels that require mouse interaction. Always add onkeydown handlers alongside onclick.
2.4.3 Focus Order
The tab order must follow the logical reading order of the page. This is determined by the DOM order, not the visual CSS order.
How to test: Tab through the page. Does focus jump around unexpectedly?
Common mistake: CSS order property in Flexbox/Grid changes visual order but not DOM order. Screen readers and keyboard users get confused.
2.4.7 Focus Visible
Users must see where the keyboard focus is. The default browser outline is often removed with outline: none — this is a violation.
How to test: Tab through the page. Can you always see which element has focus?
Correct approach: Style :focus-visible with a visible ring: outline: 2px solid brand-blue; outline-offset: 2px;. Contrast must be ≥ 3:1 against background.
3.3.2 Labels or Instructions
All form inputs must have associated labels. placeholder is not a substitute for a label.
How to test: Inspect form fields. Does each <input> have a <label for="id"> or aria-label?
Common mistake: Icons as buttons without aria-label. A magnifying glass icon needs aria-label="Search".
1.3.1 Info and Relationships
Information structure must be programmatically determinable. Use semantic HTML: headings, lists, tables with proper headers.
How to test: Run Lighthouse. It checks heading hierarchy and ARIA attributes.
Common mistake: Using <div class="heading"> instead of <h2>. Screen readers cannot navigate the page structure.
1.4.4 Resize Text
Text must be resizable up to 200% without loss of content or functionality. No horizontal scrolling should be required.
How to test: Zoom browser to 200%. Does everything still fit?
Common mistake: Fixed-width containers (width: 1200px) cause horizontal scroll at high zoom. Use max-width and responsive layouts.
3.2.3 Consistent Navigation
Navigation that appears on multiple pages must be in the same order each time.
How to test: Compare navigation across 5 different pages. Is the order identical?
Common mistake: Moving the “Contact” link to different positions on different pages. Keep navigation consistent.
WCAG compliance is not optional
Since the BFSG entered into force in June 2025, WCAG 2.1 AA is no longer a recommendation — it’s a legal requirement for most business websites in Germany. Violations can be warned off by competitors and consumer associations.
The good news: A Lighthouse Accessibility score of 95+ already covers most automated criteria. The remaining manual work is keyboard testing and screen reader verification — about 2–4 hours per site.
Frequently Asked Questions
What is WCAG 2.1 AA?
The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA are the international standard for digital accessibility. Level AA is the legal minimum standard in EU, DE (BFSG), AT (WZG) and CH (BehiG).
WCAG 2.1 vs. 2.2 — what applies currently?
WCAG 2.2 has been the current standard since October 2023. BFSG/WZG still reference WCAG 2.1, but 2.2 is fully backward compatible.
Is a Lighthouse score of 100 enough for WCAG compliance?
Lighthouse covers ~80% of WCAG criteria. The remaining 20% requires manual testing: keyboard navigation, screen reader test and content quality.
Further reading on mekyn.com
→ Pillar page: Accessibility → Related: The BFSG Explained → Related: Contrast for AA (German) → Tool: Contrast Checker (German)
External sources:
No credit card · 14-day trial · Anti-lock-in