Looks up WCAG 2.1 AA criteria and WAI-ARIA patterns, returning official W3C URLs with concise summaries. Use when user asks about accessibility standards, WCAG criteria (e.g., "1.4.3", "contrast"), ARIA attributes (e.g., "aria-expanded", "role=dialog"), or accessible component patterns (e.g., "accessible tabs", "modal dialog a11y").
This skill inherits all available tools. When active, it can use any tool Claude has access to.
aria-index.jsonwcag-index.jsonQuick lookup for WCAG 2.1 AA criteria and WAI-ARIA patterns with official W3C references.
Identify the query type:
Search the appropriate index:
Return results:
For detailed implementation:
When returning lookup results, use this format:
### [Criterion/Pattern Name]
**Summary**: [1-2 sentence explanation]
**Key Requirements**:
- [Requirement 1]
- [Requirement 2]
**Official Reference**: [URL]
**Quick Reference**: [URL] (if applicable)
| ID | Name | Key Point |
|---|---|---|
| 1.1.1 | Non-text Content | All images need alt text |
| 1.4.3 | Contrast | 4.5:1 normal, 3:1 large text |
| 2.1.1 | Keyboard | All interactive elements keyboard accessible |
| 2.4.7 | Focus Visible | Focus indicator must be visible |
| 4.1.2 | Name, Role, Value | Custom widgets need ARIA |
Don't use ARIA if native HTML works.
<!-- Prefer native HTML -->
<button>Submit</button> <!-- Not: <div role="button"> -->
<input type="checkbox"> <!-- Not: <div role="checkbox"> -->
| Pattern | Key Roles | Key Attributes |
|---|---|---|
| Dialog | dialog | aria-modal, aria-labelledby |
| Tabs | tablist, tab, tabpanel | aria-selected, aria-controls |
| Accordion | - | aria-expanded, aria-controls |
| Combobox | combobox, listbox, option | aria-expanded, aria-activedescendant |
| Menu | menu, menuitem | aria-haspopup, aria-expanded |
| Text Type | Minimum Ratio | Example |
|---|---|---|
| Normal text | 4.5:1 | #595959 on #fff (7:1) |
| Large text (18pt/14pt bold) | 3:1 | #767676 on #fff (4.5:1) |
| UI components | 3:1 | Button borders, form inputs |