# Web Accessibility

> Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.

- Skill: `diegosouzapw/web-accessibility` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/web-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/web-accessibility/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/web-accessibility

---


# Web Accessibility Skill

Ensures the MapRecruit interface is accessible to all users, including those using assistive technologies.

## When to use this skill

- When building new React components.
- When auditing existing UI for accessibility regressions.
- When creating complex interactive elements (modals, dropdowns, calendars).

## How to use it

### 1. Semantic Structure
- Use `<nav>`, `<main>`, `<section>`, and Proper Header hierarchy (`h1`-`h6`).
- Ensure all interactive elements use the correct tags (e.g., `<button>` for actions, `<a>` for navigation).

### 2. Visual & Interactive
- **Contrast**: Maintain a minimum contrast ratio of 4.5:1 for text.
- **Focus States**: Never hide focus rings (`outline-none`) unless you are providing a clear alternative focus indicator.
- **Tap Targets**: Ensure all buttons and links are at least 44x44px for touch accessibility.

### 3. ARIA Compliance
- Use `aria-label` or `aria-labelledby` for icons or elements without visible text.
- Manage focus for modals: return focus to the trigger element when the modal is closed.