wcag-aria-lookup

name	wcag-aria-lookup
description	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").

WCAG & ARIA Lookup

Quick lookup for WCAG 2.1 AA criteria and WAI-ARIA patterns with official W3C references.

Lookup Workflow

1. 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")

2. Search the appropriate index:

   • For WCAG: Read wcag-index.json
   • For ARIA: Read aria-index.json

3. Return results:

   • Summary (1-2 sentences)
   • Official W3C URL
   • Quick reference URL (if available)

4. 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

• WCAG 2.1 Full Spec
• WCAG Quick Reference
• Understanding WCAG
• WAI-ARIA 1.2 Spec
• ARIA Authoring Practices