accessibility-patterns

Solid

WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization

AI & Automation 531 stars 44 forks Updated 1 months ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
91
Recency 20%
75
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```html <!-- 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> ``...

Details

Author
vibeeval
Repository
vibeeval/vibecosystem
Created
6 months ago
Last Updated
1 months ago
Language
C#
License
MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

a11y-patterns

When to activate: accessibility, ARIA, WCAG, screen reader, keyboard navigation, focus management, a11y audit

0 Updated 1 weeks ago
Mattakushi432
Code & Development Listed

accessibility

Use when building or reviewing web UIs for accessibility — WCAG 2.2 Level AA compliance, semantic HTML over ARIA, keyboard navigation, color contrast, screen reader patterns, and testing approach.

1 Updated 2 days ago
andr-ca
Code & Development Listed

accessibility

This skill should be used when the user asks to "add accessibility", "check ARIA", "handle keyboard navigation", "add focus management", or creates UI components, forms, or interactive elements. Provides WCAG 2.2 AA patterns for keyboard navigation, ARIA roles and states, focus management, color contrast, and screen reader support.

19 Updated yesterday
dean0x