framework-a11y-patterns

Framework-Specific Accessibility Patterns

Content Preview
# Framework-Specific Accessibility Patterns

## React / Next.js

### Common Issues and Fixes

**Image alt text:**
```jsx
// ❌ Bad
<img src="/hero.jpg" />
<Image src="/hero.jpg" width={800} height={400} />

// ✅ Good
<img src="/hero.jpg" alt="Team collaborating in office" />
<Image src="/hero.jpg" width={800} height={400} alt="Team collaborating in office" />

// ✅ Decorative image
<img src="/divider.svg" alt="" role="presentation" />
```

**Form labels:**
```jsx
// ❌ Bad — placeholder as label
<
How to Use

Recommended: Install to project (local)

mkdir -p .claude/skills
curl -o .claude/skills/framework-a11y-patterns.md \
  https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/engineering-team/a11y-audit/references/framework-a11y-patterns.md

Skill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.

Alternative: Clone full repo

git clone https://github.com/alirezarezvani/claude-skills

Then reference at engineering-team/a11y-audit/references/framework-a11y-patterns.md

Related Skills