0Pricing
React Academy · Lesson

Semantics, Labels, Roles, Focus

Use proper semantics, connect labels to inputs, rely on roles, and move focus where the user needs it.

Why accessibility basics

Goal: Make UI understandable by assistive tech.

  • Use real elements (button, nav, form)
  • Give inputs proper labels
  • Manage focus for flows

Semantics & roles overview

  • Prefer native semantics: button instead of div
  • Implicit roles are provided by real elements
  • Add ARIA only when native semantics are not enough

All lessons in this course

  1. Semantics, Labels, Roles, Focus
  2. Keyboard Interactions & Skip Links
  3. Testing A11y Basics
← Back to React Academy