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 onClick={handleClick}>Click</button>

// ❌ Bad
<div onClick={handleClick}>Click</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