0Pricing
Frontend Academy · Lesson

Semantic HTML as the Foundation

Use native HTML elements like button, nav, and heading to get built-in accessibility for free, before reaching for ARIA.

Semantic HTML Is Free Accessibility

Using the right HTML element gives you keyboard support, screen reader announcements, and correct ARIA roles for free. Most accessibility problems come from using div + JavaScript instead of the native element.

button vs div with onClick

A <button> is focusable, announces 'button' to screen readers, fires click on Enter/Space, and works with form submit. A <div onClick> has none of these.

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

All lessons in this course

  1. WCAG Levels A AA AAA
  2. Semantic HTML as the Foundation
  3. ARIA Roles and Attributes
  4. Keyboard Navigation and Focus Management
← Back to Frontend Academy