---
name: valec3/frontend-accessibility-aria
source: https://app.decimal.ai/s/valec3-frontend-accessibility-aria@1/SKILL.md
source_sha256: 3d715f54fc8d
---

# Frontend Accessibility Aria

## When to use this skill
- Making apps accessible
- Adding ARIA attributes
- Keyboard navigation
- Screen reader support

## Workflow
- [ ] Use semantic HTML first
- [ ] Add ARIA when needed
- [ ] Test with screen reader
- [ ] Ensure keyboard navigation
- [ ] Check color contrast

## Instructions

### Semantic HTML
```typescript
// ✅ Good
<button onClick={handleClick}>Click</button>

// ❌ Bad
<div onClick={handleClick}>Click</div>
```

### ARIA Attributes
```typescript
<button
  aria-label="Close dialog"
  aria-expanded={isOpen}
  aria-controls="dialog-content"
>
  ×
</button>

<div
  id="dialog-content"
  role="dialog"
  aria-labelledby="dialog-title"
  aria-modal="true"
>
  <h2 id="dialog-title">Title</h2>
</div>
```

### Skip Links
```typescript
<a href="#main-content" className="skip-link">
  Skip to main content
</a>
<main id="main-content">
  {/* Content */}
</main>
```

## Resources
- Semantic HTML first
- ARIA as enhancement
- Test with keyboard only
- Use axe DevTools