Claude Code Plugins

Community-maintained marketplace

Feedback

wcag-aria-lookup

@naporin0624/claude-web-audit-plugins
0
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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:

  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