WCAG Audit Patterns Comprehensive guide to auditing web content against WCAG 2.2 guidelines with actionable remediation strategies. When to Use This Skill Conducting accessibility audits Fixing WCAG violations Implementing accessible components Preparing for accessibility lawsuits Meeting ADA/Section 508 requirements Achieving VPAT compliance Core Concepts 1. WCAG Conformance Levels Level Description Required For A Minimum accessibility Legal baseline AA Standard conformance Most regulations AAA Enhanced accessibility Specialized needs 2. POUR Principles Perceivable: Can users perceive the content? Operable: Can users operate the interface? Understandable: Can users understand the content? Robust: Does it work with assistive tech? 3. Common Violations by Impact Critical (Blockers): ├── Missing alt text for functional images ├── No keyboard access to interactive elements ├── Missing form labels └── Auto-playing media without controls Serious: ├── Insufficient color contrast ├── Missing skip links ├── Inaccessible custom widgets └── Missing page titles Moderate: ├── Missing language attribute ├── Unclear link text ├── Missing landmarks └── Improper heading hierarchy Audit Checklist Perceivable (Principle 1)
1.1 Text Alternatives
1.1.1 Non-text Content (Level A)
[ ] All images have alt text
[ ] Decorative images have alt=""
[ ] Complex images have long descriptions
[ ] Icons with meaning have accessible names
[ ] CAPTCHAs have alternatives Check:
html
<!-- Good -->
<
img
src
=
"
chart.png
"
alt
=
"
Sales increased 25% from Q1 to Q2
"
/>
<
img
src
=
"
decorative-line.png
"
alt
=
"
"
/>
<!-- Bad -->
<
img
src
=
"
chart.png
"
/>
<
img
src
=
"
decorative-line.png
"
alt
=
"
decorative line
"
/>
1.2 Time-based Media 1.2.1 Audio-only and Video-only (Level A) Audio has text transcript Video has audio description or transcript 1.2.2 Captions (Level A) All video has synchronized captions Captions are accurate and complete Speaker identification included 1.2.3 Audio Description (Level A) Video has audio description for visual content 1.3 Adaptable 1.3.1 Info and Relationships (Level A) Headings use proper tags (h1-h6) Lists use ul/ol/dl Tables have headers Form inputs have labels ARIA landmarks present Check:
< h1
Page Title </ h1
< h2
Section </ h2
< h3
Subsection </ h3
< h2
Another Section </ h2
< table
< thead
< tr
< th scope = " col "
Name </ th
< th scope = " col "
Price </ th
</ tr
</ thead
</ table
1.3.2 Meaningful Sequence (Level A) Reading order is logical CSS positioning doesn't break order Focus order matches visual order 1.3.3 Sensory Characteristics (Level A) Instructions don't rely on shape/color alone "Click the red button" → "Click Submit (red button)" 1.4 Distinguishable 1.4.1 Use of Color (Level A) Color is not only means of conveying info Links distinguishable without color Error states not color-only 1.4.3 Contrast (Minimum) (Level AA) Text: 4.5:1 contrast ratio Large text (18pt+): 3:1 ratio UI components: 3:1 ratio Tools: WebAIM Contrast Checker, axe DevTools 1.4.4 Resize Text (Level AA) Text resizes to 200% without loss No horizontal scrolling at 320px Content reflows properly 1.4.10 Reflow (Level AA) Content reflows at 400% zoom No two-dimensional scrolling All content accessible at 320px width 1.4.11 Non-text Contrast (Level AA) UI components have 3:1 contrast Focus indicators visible Graphical objects distinguishable 1.4.12 Text Spacing (Level AA) No content loss with increased spacing Line height 1.5x font size Paragraph spacing 2x font size Letter spacing 0.12x font size Word spacing 0.16x font size
Operable (Principle 2)
```markdown
2.1 Keyboard Accessible
2.1.1 Keyboard (Level A)
- [ ] All functionality keyboard accessible
- [ ] No keyboard traps
- [ ] Tab order is logical
- [ ] Custom widgets are keyboard operable Check: ```javascript // Custom button must be keyboard accessible
< div role = " alert " aria-live = " assertive "
Error: Form submission failed </ div
Automated Testing
```javascript // axe-core integration const axe = require('axe-core'); async function runAccessibilityAudit(page) { await page.addScriptTag({ path: require.resolve('axe-core') }); const results = await page.evaluate(async () => { return await axe.run(document, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'] } }); }); return { violations: results.violations, passes: results.passes, incomplete: results.incomplete }; } // Playwright test example test('should have no accessibility violations', async ({ page }) => { await page.goto('/'); const results = await runAccessibilityAudit(page); expect(results.violations).toHaveLength(0); });
CLI tools
npx @axe-core/cli https://example.com npx pa11y https://example.com lighthouse https://example.com --only-categories = accessibility Remediation Patterns Fix: Missing Form Labels
< input type = " email " placeholder = " Email " />
< label for = " email "
Email address </ label
< input id = " email " type = " email " />
< input type = " email " aria-label = " Email address " />
< span id = " email-label "
Email </ span
< input type = " email " aria-labelledby = " email-label " /> Fix: Insufficient Color Contrast / Before: 2.5:1 contrast / .text { color :
767676
; } / After: 4.5:1 contrast / .text { color :
595959
; } / Or add background / .text { color :
767676
; background :
000
; } Fix: Keyboard Navigation // Make custom element keyboard accessible class AccessibleDropdown extends HTMLElement { connectedCallback ( ) { this . setAttribute ( "tabindex" , "0" ) ; this . setAttribute ( "role" , "combobox" ) ; this . setAttribute ( "aria-expanded" , "false" ) ; this . addEventListener ( "keydown" , ( e ) => { switch ( e . key ) { case "Enter" : case " " : this . toggle ( ) ; e . preventDefault ( ) ; break ; case "Escape" : this . close ( ) ; break ; case "ArrowDown" : this . focusNext ( ) ; e . preventDefault ( ) ; break ; case "ArrowUp" : this . focusPrevious ( ) ; e . preventDefault ( ) ; break ; } } ) ; } } Best Practices Do's Start early - Accessibility from design phase Test with real users - Disabled users provide best feedback Automate what you can - 30-50% issues detectable Use semantic HTML - Reduces ARIA needs Document patterns - Build accessible component library Don'ts Don't rely only on automated testing - Manual testing required Don't use ARIA as first solution - Native HTML first Don't hide focus outlines - Keyboard users need them Don't disable zoom - Users need to resize Don't use color alone - Multiple indicators needed
← 返回排行榜