# UI Accessibility Pro

> Mastering semantic HTML and ARIA to build inclusive web experiences for everyone.

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

---


# Accessibility Pro

Accessibility is not a feature; it is a fundamental requirement of the web. This skill ensures your UI is usable by people with varying abilities.

## Core Standards
- **Semantic HTML**: Use `<main>`, `<nav>`, `<article>`, and `<button>` correctly. Avoid "div-itis".
- **Focus States**: Never disable `:focus` without providing a high-visibility alternative.
- **Color Contrast**: Ensure a minimum contrast ratio of 4.5:1 for text.

## ARIA (Accessible Rich Internet Applications)
- **Roles**: Use `role="alert"`, `role="dialog"`, etc., only when semantic HTML is insufficient.
- **Aria-Labels**: Provide descriptive labels for icon-only buttons.
- **Live Regions**: Use `aria-live="polite"` for dynamic content updates.

## Testing Checklist
- [ ] **Keyboard Only**: Can you navigate the entire app using only Tab and Space/Enter?
- [ ] **Screen Reader**: Does the content read in a logical order?
- [ ] **Zoom**: Does the layout remain functional at 200% zoom?