WCAG & ARIA Lookup
Quick lookup for WCAG 2.1 AA criteria and WAI-ARIA patterns with official W3C references.
Lookup Workflow
Identify the query type:
- WCAG criterion (e.g., "contrast", "1.4.3", "keyboard")
- ARIA attribute (e.g., "aria-expanded", "aria-live")
- ARIA role (e.g., "role=dialog", "role=tablist")
- Component pattern (e.g., "tabs", "modal", "accordion")
Search the appropriate index:
- For WCAG: Read wcag-index.json
- For ARIA: Read aria-index.json
Return results:
- Summary (1-2 sentences)
- Official W3C URL
- Quick reference URL (if available)
For detailed implementation:
- Suggest fetching the official URL
- Or reference WAI-ARIA Authoring Practices
Response Format
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)
Quick Reference
WCAG 2.1 AA - Most Common Issues
| 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 |
ARIA - First Rule
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"> -->
Common ARIA Patterns
| 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 |
Contrast Quick Check
| 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 |
External Resources
1---2name: wcag-aria-lookup3description: 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").4---5
6# WCAG & ARIA Lookup
7
8Quick lookup for WCAG 2.1 AA criteria and WAI-ARIA patterns with official W3C references.
9
10## Lookup Workflow
11
121. **Identify the query type**:
13 - WCAG criterion (e.g., "contrast", "1.4.3", "keyboard")
14 - ARIA attribute (e.g., "aria-expanded", "aria-live")
15 - ARIA role (e.g., "role=dialog", "role=tablist")
16 - Component pattern (e.g., "tabs", "modal", "accordion")
17
182. **Search the appropriate index**:
19 - For WCAG: Read [wcag-index.json](wcag-index.json)
20 - For ARIA: Read [aria-index.json](aria-index.json)
21
223. **Return results**:
23 - Summary (1-2 sentences)
24 - Official W3C URL
25 - Quick reference URL (if available)
26
274. **For detailed implementation**:
28 - Suggest fetching the official URL
29 - Or reference WAI-ARIA Authoring Practices
30
31## Response Format
32
33When returning lookup results, use this format:
34
35```
36### [Criterion/Pattern Name]
37
38**Summary**: [1-2 sentence explanation]
39
40**Key Requirements**:
41- [Requirement 1]
42- [Requirement 2]
43
44**Official Reference**: [URL]
45**Quick Reference**: [URL] (if applicable)
46```
47
48## Quick Reference
49
50### WCAG 2.1 AA - Most Common Issues
51
52| ID | Name | Key Point |
53|----|------|-----------|
54| 1.1.1 | Non-text Content | All images need alt text |
55| 1.4.3 | Contrast | 4.5:1 normal, 3:1 large text |
56| 2.1.1 | Keyboard | All interactive elements keyboard accessible |
57| 2.4.7 | Focus Visible | Focus indicator must be visible |
58| 4.1.2 | Name, Role, Value | Custom widgets need ARIA |
59
60### ARIA - First Rule
61
62> Don't use ARIA if native HTML works.
63
64```html
65<!-- Prefer native HTML -->
66<button>Submit</button> <!-- Not: <div role="button"> -->
67<input type="checkbox"> <!-- Not: <div role="checkbox"> -->
68```
69
70### Common ARIA Patterns
71
72| Pattern | Key Roles | Key Attributes |
73|---------|-----------|----------------|
74| Dialog | `dialog` | `aria-modal`, `aria-labelledby` |
75| Tabs | `tablist`, `tab`, `tabpanel` | `aria-selected`, `aria-controls` |
76| Accordion | - | `aria-expanded`, `aria-controls` |
77| Combobox | `combobox`, `listbox`, `option` | `aria-expanded`, `aria-activedescendant` |
78| Menu | `menu`, `menuitem` | `aria-haspopup`, `aria-expanded` |
79
80## Contrast Quick Check
81
82| Text Type | Minimum Ratio | Example |
83|-----------|---------------|---------|
84| Normal text | 4.5:1 | `#595959` on `#fff` (7:1) |
85| Large text (18pt/14pt bold) | 3:1 | `#767676` on `#fff` (4.5:1) |
86| UI components | 3:1 | Button borders, form inputs |
87
88## External Resources
89
90- [WCAG 2.1 Full Spec](https://www.w3.org/TR/WCAG21/)
91- [WCAG Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
92- [Understanding WCAG](https://www.w3.org/WAI/WCAG21/Understanding/)
93- [WAI-ARIA 1.2 Spec](https://www.w3.org/TR/wai-aria-1.2/)
94- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
majiayu000