accessibility-patterns

Solid

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

AI & Automation 519 stars 44 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 89/100

Stars 20%
90
Recency 20%
90
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
4 months ago
Last Updated
1 weeks ago
Language
C#
License
MIT

Integrates with

Anthropic · AI

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Solid

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.

17 Updated 2 days ago
dean0x
Testing & QA Solid

accessibility-implementation

WCAG 2.1/2.2 compliance, ARIA patterns, keyboard nav, focus management, a11y testing. Use when implementing accessible components or user mentions WCAG/ARIA/screen readers.

48 Updated today
laurigates
AI & Automation Listed

web-accessibility

Build accessible web applications following WCAG guidelines. Use when implementing ARIA patterns, keyboard navigation, screen reader support, or ensuring accessibility compliance. Triggers on accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation.

2 Updated yesterday
Makiya1202