# Accessibility First

> Use whenever creating or modifying UI, websites, apps, dashboards, forms, buttons, navigation, modals, interactive components, or visual interfaces. Ensures readability, contrast, keyboard navigation, focus states, labels, and usable controls.

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

---


# Accessibility First

Make UI readable, accessible, and usable by default.

Use readable text sizes, strong contrast, clear hierarchy, comfortable line-height, and clear labels.

Buttons, links, inputs, and controls must be easy to click and tap.

Interactive elements should have visible hover, active, and focus states.

Do not remove focus outlines without replacing them with visible focus styles.

Use semantic HTML when possible.

Icon-only buttons should have aria-label.

Do not communicate important information only through color.

Before finishing, check readability, contrast, focus states, keyboard usability, tap targets, forms, and labels.