Semantics, Labels, Roles, Focus
Use proper semantics, connect labels to inputs, rely on roles, and move focus where the user needs it.
Semantics, Labels, Roles, Focus is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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
Labeled inputs (good)
Create inputs with connected labels and a live region for feedback.
<div id="root"></div>
Buttons and toggle state
Use a real button and expose state with aria-pressed for toggles.
<div id="root"></div>
Focus on open (good UX)
Move focus to the newly opened panel so keyboard users can start typing immediately.
<div id="root"></div>
Tips & pitfalls
- Prefer native elements; add ARIA only when needed
- Labels give inputs a reliable name
- Manage focus when opening overlays or after navigation
Labeling best practice
Recap
Recap: Use real semantics, connect labels to inputs, expose state with roles/ARIA when needed, and move focus to where users act next.
Frequently asked questions
Is the “Semantics, Labels, Roles, Focus” lesson free?
Yes — the full text of “Semantics, Labels, Roles, Focus” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Semantics, Labels, Roles, Focus”?
Use proper semantics, connect labels to inputs, rely on roles, and move focus where the user needs it. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Semantics, Labels, Roles, Focus” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Semantics, Labels, Roles, Focus
- Keyboard Interactions & Skip Links
- Testing A11y Basics