Wcag Checker

WCAG Checker — Accessibility Verification Checklist + Tools

A domain knowledge skill that enhances the a11y-auditor agent's accessibility verification capabilities.

Target Agents

• a11y-auditor — Uses this skill's checklist and formulas to verify per-component accessibility
• component-developer — Checks accessibility requirements proactively during development

WCAG 2.1 AA Mandatory Criteria Checklist

1. Perceivable

2. Operable

3. Understandable

4. Robust

Contrast Ratio Calculation Formula

Relative Luminance

L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin

Where:
- Normalize sRGB to 0-1 (e.g., #FF -> 1.0)
- C_lin = C_srgb <= 0.04045 ? C_srgb/12.92 : ((C_srgb+0.055)/1.055)^2.4

Contrast Ratio Formula

CR = (L_lighter + 0.05) / (L_darker + 0.05)

AA criteria:
- Normal text (< 18pt or < 14pt bold): CR >= 4.5
- Large text (>= 18pt or >= 14pt bold): CR >= 3.0
- UI components/graphics: CR >= 3.0

AAA criteria:
- Normal text: CR >= 7.0
- Large text: CR >= 4.5

Auto-Adjustment When Contrast Not Met

1. Calculate contrast ratio of current foreground and background
2. If CR < target:
   a. Adjust L only in HSL color space to preserve hue
   b. Back-calculate L_target: (L_fg + 0.05) / target_CR - 0.05
3. Report both pre- and post-adjustment colors

Per-Component ARIA Patterns

Button

<button type="button" aria-label="Close" aria-pressed="false">
  <svg aria-hidden="true">...</svg>
</button>

Modal/Dialog

<div role="dialog" aria-modal="true" aria-labelledby="title-id">
  <h2 id="title-id">Title</h2>
  <!-- Focus trap: Tab cycles within dialog only -->
  <!-- Close with Esc, return focus to trigger element on close -->
</div>

Select/Combobox

<div role="combobox" aria-expanded="false" aria-haspopup="listbox">
  <input aria-autocomplete="list" aria-controls="listbox-id" />
  <ul id="listbox-id" role="listbox">
    <li role="option" aria-selected="true">Option 1</li>
  </ul>
</div>

Tab

<div role="tablist" aria-label="Settings">
  <button role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content</div>

Keyboard Interaction Matrix

Verification Report Template

## Accessibility Verification Report

### Summary
- Verification Level: WCAG 2.1 AA
- P0 Issues: N (release blocker)
- P1 Issues: N (recommended)

### P0 Issues (Must Fix)
| # | Component | Criterion | Issue | Fix Proposal |

### Contrast Ratio Matrix
| Foreground | Background | Contrast Ratio | AA Normal | AA Large |

### Keyboard Test Results
| Component | Tab | Enter | Space | Esc | Arrow | Result |