Free ToolBy GitIntel

Web Accessibility Guide for Developers: WCAG 2.2, ARIA, and Testing Tools

Accessibility is both a legal requirement (ADA, EU Accessibility Act, AODA) and a quality metric

GitIntel tracks AI-generated code across your entire git history — giving every tool on this page the attribution layer that standard dev tooling misses.

Try GitIntel free

Accessibility is both a legal requirement (ADA, EU Accessibility Act, AODA) and a quality metric. 1.3 billion people worldwide have some form of disability. Accessible sites also have better SEO (semantic HTML, alt text, proper headings), better mobile UX, and lower legal risk.

WCAG 2.2 has three levels: A (minimum), AA (legally required in most jurisdictions), and AAA (aspirational). The EU Web Accessibility Directive and the revised Section 508 both require AA compliance. The 2024 DOJ ADA Web Rule explicitly mandates WCAG 2.1 AA for state and local government websites, and private businesses with 15+ employees that receive federal funding.

The most common failures in automated scans:

Missing alt text on images: every image needs alt="description" or alt="" for decorative images. Screen readers announce the filename if alt is absent, which is a poor experience.

Insufficient color contrast: WCAG AA requires 4.5:1 ratio for normal text, 3:1 for large text. The blue on light grey that looks fine on a calibrated monitor often fails. Use browser devtools' contrast checker or axe.

Missing form labels: every input needs an associated label element (for attribute matching input id). 'Placeholder' is not a label — it disappears when the user types.

Keyboard trap: modal dialogs must trap focus inside the modal, and return focus to the trigger when closed. Native HTML elements (button, a, input) are focusable by default. Custom components need tabindex="0" and keydown handlers.

Focus indicator removed: CSS 'outline: none' on :focus breaks keyboard navigation. Use ':focus-visible' to show a focus ring only for keyboard navigation without affecting mouse clicks.

Testing stack: axe-core (automated, catches 30-40% of issues), Chrome DevTools accessibility panel, NVDA + Firefox (free screen reader for Windows), and VoiceOver on Mac/iOS for real-device testing.

Frequently Asked Questions

What is WCAG 2.2 and what changed from 2.1?

WCAG 2.2 (published October 2023) added nine new success criteria at AA and AAA levels. The most important AA additions: Focus Appearance (2.4.11 — focus indicator must be visible with minimum size and contrast), Target Size Minimum (2.5.8 — interactive targets at least 24x24 CSS pixels), and Accessible Authentication (3.3.8 — no cognitive test like CAPTCHAs that rely on memory or transcription without an alternative). WCAG 2.0 Criterion 4.1.1 (Parsing) was removed as it's no longer relevant with modern browsers.

What's the difference between ARIA roles and semantic HTML?

Semantic HTML elements (button, nav, main, article, header) have built-in ARIA roles and keyboard behavior. A 'button' element is keyboard-focusable, activated by Enter/Space, and announced as 'button' to screen readers — for free. A 'div' with role='button' requires you to add tabindex='0', keydown handlers for Enter/Space, and gets no visual focus styling by default. The rule: use semantic HTML when it exists; use ARIA only to fill gaps.

What's the fastest way to fix accessibility issues on an existing site?

Run axe DevTools (free Chrome extension) and fix the violations in severity order. Critical violations (missing form labels, images without alt text, insufficient contrast on key text) should be fixed first — they affect the largest number of users. Then: verify keyboard navigation works for all interactive elements, add skip navigation links, and ensure all dialogs/modals trap focus correctly. These five changes resolve 70-80% of common accessibility failures.

Start Using GitIntel Free

Open source. No account required. Works on any git repository.

View on GitHubInstall in 30 seconds