Accessibility patterns

Skill vibeeval/vibecosystem/skills/accessibility-patterns

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimizationFrom its SKILL.md

Install

npx -y skills add vibeeval/vibecosystem --skill accessibility-patterns

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

runs commandsInstructs the agent to run 2 commands, including `npx @axe-core/cli https://localhost:3000` and 1 more.
fetches URLsInstructs the agent to fetch 1 URL, including https://localhost:3000.

SKILL.md

3.7 KB, ~1.0k tokens by cl100k_base, as published. Nobody here has run it

Accessibility Patterns

WCAG 2.2 AA Requirements

Perceivable

Kriter	Kural	Kontrol
1.1.1	Non-text content alt text	`<img alt="description">`
1.3.1	Semantic HTML	Headings, landmarks, lists
1.4.3	Color contrast	4.5:1 normal text, 3:1 large
1.4.11	UI component contrast	3:1 borders, icons

Operable

Kriter	Kural	Kontrol
2.1.1	Keyboard accessible	Tab, Enter, Space, Escape
2.4.3	Focus order	Logical tab sequence
2.4.7	Focus visible	Visible focus indicator
2.5.8	Target size	Min 24x24px (44x44px önerilir)

Understandable

Kriter	Kural	Kontrol
3.1.1	Language of page	`<html lang="tr">`
3.2.1	On focus	No unexpected context change
3.3.1	Error identification	Clear error messages
3.3.2	Labels or instructions	Form labels visible

ARIA Patterns

<!-- Dialog -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
  <h2 id="title">Confirm</h2>
  <button aria-label="Close dialog">×</button>
</div>

<!-- Tabs -->
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel1">Tab 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel2">Tab 2</button>
</div>
<div role="tabpanel" id="panel1">Content 1</div>

<!-- Live region (dynamic updates) -->
<div aria-live="polite" aria-atomic="true">
  3 new messages
</div>

Keyboard Navigation

// Focus trap (modal/dialog)
function useFocusTrap(ref: RefObject<HTMLElement>) {
  useEffect(() => {
    const focusable = ref.current?.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    const first = focusable?.[0] as HTMLElement
    const last = focusable?.[focusable.length - 1] as HTMLElement

    function handleKeyDown(e: KeyboardEvent) {
      if (e.key !== 'Tab') return
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus()
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus()
      }
    }
    ref.current?.addEventListener('keydown', handleKeyDown)
    first?.focus()
    return () => ref.current?.removeEventListener('keydown', handleKeyDown)
  }, [ref])
}

Skip Links

<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- ... navigation ... -->
<main id="main-content">...</main>

<style>
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 100;
}
.skip-link:focus { top: 0; }
</style>

Motion Preferences

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Testing

# axe-core (automated)
npx @axe-core/cli https://localhost:3000

# Lighthouse accessibility audit
lighthouse --only-categories=accessibility https://localhost:3000

Checklist

Anti-Patterns

<div onclick> instead of <button>
Color-only information (add icon/text)
Auto-playing video/audio
Removing focus outline without replacement
Using ARIA when native HTML suffices

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.