Installs into .claude/skills of the current project.
Are you the author of Web Accessibility?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/diegosouzapw-web-accessibility)
---
name: web-accessibility
description: Enforces semantic HTML and accessibility standards (ARIA, keyboard navigation, color contrast). Use when building or auditing UI components.
---
# 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.
