Web Accessibility WCAG: Practical Guide

WCAG Standards

The Web Content Accessibility Guidelines (WCAG) define accessibility rules. Current version: WCAG 2.2, a W3C Recommendation since 5 October 2023 and the ISO/IEC 40500:2025 standard since October 2025 (W3C). Content that conforms to WCAG 2.2 also conforms to WCAG 2.1 (2018); version 2.2 adds 9 criteria and removes criterion 4.1.1.

The 4 POUR Principles

• Perceivable: Information must be presentable in different ways
• Operable: Navigation and interaction possible via keyboard, voice, etc.
• Understandable: Clear content and interface
• Robust: Compatible with assistive technologies

The 3 Conformance Levels

• Level A: Minimum requirements (31 criteria in WCAG 2.2)
• Level AA: Recommended for most sites (55 criteria, includes A)
• Level AAA: Maximum level, difficult to achieve (86 criteria)

Realistic goal: Aim for AA for most web projects.

Essential WCAG Criteria (AA Level)

1. Text Alternatives (1.1.1 - A)

• Alt attribute on all images
• Empty alt (alt="") for decorative images
• Long descriptions for complex graphics

2. Color Contrast (1.4.3 - AA)

• Minimum ratio 4.5:1 for normal text
• Minimum ratio 3:1 for large text (18pt+ or 14pt+ bold)
• Tools: WebAIM Contrast Checker, Stark Figma plugin

3. Keyboard Navigation (2.1.1 - A)

• All functionality accessible via keyboard
• Logical tab order (tabindex if necessary)
• Visible focus on all interactive elements
• No keyboard trap (can exit modals, dropdowns)

4. Accessible Forms (3.3.1, 3.3.2 - A)

• Explicit labels for each input (label + for/id)
• Clear error messages linked to fields (aria-describedby)
• Visible instructions before submission
• Autocomplete attributes to facilitate filling

5. Semantic Structure (1.3.1 - A)

• Consistent H1 > H2 > H3 hierarchy
• Semantic HTML tags (nav, main, aside, article, section)
• Lists (ul, ol) for listed content
• Tables with thead, tbody, th[scope]

6. ARIA Landmarks (1.3.1 - A)

• role="banner" (header)
• role="navigation" (nav)
• role="main" (main content)
• role="complementary" (sidebar)
• role="contentinfo" (footer)

7. Resizable Text (1.4.4 - AA)

• Text zoomable up to 200% without content loss
• Use rem/em instead of px for font sizes
• Responsive and flexible layout

8. Consistent Focus Order (2.4.3 - A)

• Tab order follows visual order
• Avoid tabindex > 0 (disruptive)
• Modals: trapped focus, return to trigger element on close

ARIA: When and How to Use It

ARIA (Accessible Rich Internet Applications) enriches HTML semantics.

ARIA Golden Rules

1. Prefer native HTML: button > div[role="button"]
2. Don't overload: Too much ARIA = confusion
3. Test with screen readers: NVDA, JAWS, VoiceOver

Useful ARIA

• aria-label: Alternative label (icon without text)
• aria-labelledby: References an element as label
• aria-describedby: Complementary description
• aria-live: Announces dynamic changes (notifications, errors)
• aria-hidden="true": Hides from screen readers
• aria-expanded: Open/closed state (accordion, dropdown)
• aria-current="page": Active page in navigation

Testing Tools

Automated Tests (detect ~30% of issues)

• axe DevTools: Chrome/Firefox extension
• Lighthouse: Integrated in Chrome DevTools
• WAVE: Extension and API
• Pa11y: CLI for CI/CD

Manual Tests (essential)

• Keyboard navigation: Tab, Shift+Tab, Enter, Space, Esc
• Screen readers: NVDA (Windows free), JAWS (Windows paid), VoiceOver (Mac/iOS free)
• Browser zoom: Test at 200%
• Contrast: WebAIM Contrast Checker
• HTML validation: W3C Validator

Legal Obligations

As of 26 September 2026:

• Europe, private sector: the European Accessibility Act (Directive (EU) 2019/882) has applied since 28 June 2025 to some products and services, including consumer banking services and e-commerce. For banking, see the European Accessibility Act and online banking.
• Europe, public sector: Directive (EU) 2016/2102 covers the websites and apps of public sector bodies.
• European standard: EN 301 549 v3.2.1 (WCAG 2.1 AA) remains the reference; v4.1.1, aligned with WCAG 2.2, is not yet cited in the Official Journal of the EU (AccessibleEU).
• France: RGAA 4.1.2 (106 criteria, based on WCAG 2.1, in French) is the evaluation method for Article 47 of the law of 11 February 2005. RGAA 5, which will include WCAG 2.2, is expected by the end of 2026.
• Morocco: the 2023 interbank charter commits banks to audit their digital services against WCAG. See banking accessibility: the Bank Al-Maghrib charter and WCAG 2.2.

USA: ADA and Section 508

Americans with Disabilities Act: Commercial sites can be sued. Section 508: Mandatory for federal agencies.

Business Benefits

• SEO: Semantic structure improves ranking
• Expanded audience: 1.3 billion people, or 16% of the world population, live with a significant disability (WHO)
• Usability: An accessible site is easier for everyone
• Brand image: CSR commitment and inclusivity
• Legal compliance: Avoids fines and lawsuits

Quick Accessibility Checklist

Common Accessibility Mistakes

Resources and Further Reading

Official Documentation

• WCAG 2.2 Guidelines: W3C Quick Reference
• MDN Accessibility: Comprehensive guides and tutorials
• WebAIM: Articles, checklists, and tools

Testing Tools

• axe DevTools: Browser extension for accessibility testing
• WAVE: Web Accessibility Evaluation Tool
• Lighthouse: Built into Chrome DevTools
• Color Contrast Analyzer: Desktop app for contrast testing

Screen Readers

• NVDA: Free screen reader for Windows
• VoiceOver: Built into macOS and iOS
• JAWS: Professional screen reader (paid)

Conclusion

Web accessibility is an ongoing commitment, not a one-time fix. By following WCAG guidelines, testing regularly, and prioritizing inclusive design, you create better experiences for all users while meeting legal requirements and improving your SEO. Start with the basics—proper semantics, keyboard navigation, color contrast—and progressively enhance your accessibility practices.