valec3 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
// ✅ Good
<button
// ❌ Bad
<div
ARIA Attributes
<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
<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