# Accessibility Pattern Library

> Provides accessible UI component patterns with ARIA attributes, keyboard navigation, and screen reader support.

- Skill: `fadil369/accessibility-pattern-library` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fadil369/accessibility-pattern-library`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fadil369/accessibility-pattern-library/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fadil369 (https://skillmd.com/u/fadil369)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fadil369/accessibility-pattern-library

---


# Accessibility Pattern Library

Provides accessible UI component patterns following WCAG 2.1 AA guidelines.

## Decision Framework

### When to Apply
Use when:
- Building interactive UI components (modals, dropdowns, tabs, forms)
- Implementing keyboard navigation
- Adding screen reader support
- Auditing existing components for accessibility

### When NOT to Apply
Don't use when:
- Server-side rendering without client interaction
- Non-interactive content display
- Using a component library that already handles accessibility

## Anti-Patterns

### 1. Non-Semantic Interactive Elements
```html
<!-- BAD -->
<div onclick="openModal()">Open</div>
<span class="button" tabindex="0">Click me</span>

<!-- GOOD -->
<button aria-haspopup="dialog" aria-expanded="false">Open</button>
```

### 2. Missing Focus Management
```javascript
// BAD: Modal opens but focus stays on trigger
openModal();

// GOOD: Move focus to modal, trap focus inside
openModal();
modal.querySelector('[autofocus]')?.focus() || modal.focus();
```

### 3. Invisible Focus Indicators
```css
/* BAD */
*:focus { outline: none; }

/* GOOD */
*:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
```


## Trigger Phrases

- "Add accessibility"
- "ARIA support"
- "Keyboard navigation"
- "Screen reader"
- "WCAG compliance"

## Patterns

### Modal Dialog
```html
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Dialog Title</h2>
  <button aria-label="Close dialog" onclick="close()">&times;</button>
  <!-- Content -->
</div>
```

### Tab Panel
```div [role="tablist"]
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab 2</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">Content 1</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>Content 2</div>
```

### Live Region for Dynamic Updates
```html
<div aria-live="polite" aria-atomic="true">
  <!-- Dynamic status messages announced by screen readers -->
</div>
```

## Integration
- Works with: form-pattern-engine, mobile-gesture-handler, design-audit
- Validates with: performance-budget-enforcer