Design an accessible-by-default component pattern, semantic HTML first and ARIA only where needed. Reach for this on a design-system or component question.
Installs into .claude/skills of the current project.
Are you the author of Design Accessible Pattern?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/mcorbett51090-design-accessible-pattern)
---
name: design-accessible-pattern
description: "Design an accessible-by-default component pattern, semantic HTML first and ARIA only where needed. Reach for this on a design-system or component question."
---
# Skill: Design accessible pattern
Reaching for ARIA when a native element fits adds risk and behavior you have to re-implement; no ARIA beats bad ARIA (§3 #4).
## Step 1 — Reach for native first
A native element carries role, state, and keyboard behavior for free (§3 #4).
## Step 2 — Add ARIA only where needed
When no native element fits, apply correct role/state/value and re-implement keyboard behavior (§3 #4).
## Step 3 — Bake in contrast and focus
Contrast-checked tokens via `accessibility_calc.py contrast`, visible focus, and adequate target size (§3 #5 #7).
## Step 4 — Ship it to the design system
Into the shared component and definition-of-done so the fix prevents recurrence (§3 #7).
## Output
A semantic-first, accessible-by-default pattern in the design system that prevents defects rather than patching them.
