Awesome-omni-skill web-accessibility

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

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/web-accessibility" ~/.claude/skills/diegosouzapw-awesome-omni-skill-web-accessibility && rm -rf "$T"

manifest: skills/development/web-accessibility/SKILL.md

source content

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.