wcag-aria-lookup

naporin0624's avatarfrom naporin0624

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

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 26, 2025
[Testing and QA]

When & Why to Use This Skill

The WCAG & ARIA Lookup skill is a specialized utility designed to streamline web accessibility compliance. It provides instant access to WCAG 2.1 AA success criteria and WAI-ARIA patterns, delivering official W3C references, concise summaries, and implementation requirements to help developers and QA engineers build inclusive digital products.

Use Cases

  • Accessibility Auditing: Quickly retrieve specific WCAG 2.1 AA criteria (e.g., 1.4.3 Contrast or 2.1.1 Keyboard) to verify compliance during manual or automated testing.
  • Accessible UI Development: Reference official WAI-ARIA patterns for complex components like modal dialogs, tabs, and accordions to ensure correct role and attribute implementation.
  • Design Validation: Check minimum color contrast ratios for various text sizes and UI components to meet visual accessibility standards early in the design phase.
  • Screen Reader Optimization: Look up the correct usage of ARIA attributes such as 'aria-expanded' or 'aria-live' to improve the experience for users of assistive technologies.
  • Code Review: Use the 'First Rule of ARIA' reference to identify opportunities where native HTML elements should be used instead of custom ARIA roles.
namewcag-aria-lookup
descriptionLooks 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:

  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