Claude-skill-registry applying-a11y-standards

Name: applying-a11y-standards
Author: majiayu000

Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

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

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/applying-a11y-standards" ~/.claude/skills/majiayu000-claude-skill-registry-applying-a11y-standards && rm -rf "$T"

manifest: skills/data/applying-a11y-standards/SKILL.md

Accessibility Standards (a11y)

When to use this skill

Every time you create a new component or page.
During UI audits.

Best Practices

Semantic HTML: Use
```
<main>
```
,
```
<header>
```
,
```
<footer>
```
,
```
<nav>
```
, and appropriate heading levels.
ARIA Labels: Use
```
aria-label
```
for icon-only buttons.
Keyboard Nav: Ensure all interactive elements have a visible
```
:focus-visible
```
state.
Contrast: Maintain a text-to-background contrast ratio of at least 4.5:1.

Instructions

Tools: Use the
```
axe-core
```
library or Lighthouse to run automated audits.
Alt Text: Every
```
Image
```
must have a descriptive
```
alt
```
attribute.