HTML Accessibility
Web accessibility (a11y) ensures people with disabilities can use websites, including those relying on screen readers, keyboard-only navigation, or assistive devices. Using semantic HTML is the single biggest step toward accessibility.
ARIA (Accessible Rich Internet Applications) attributes like aria-label and role can supplement semantics when native HTML isn't enough, but should never replace proper semantic elements when one is available.
<button aria-label="Close">Γ</button>Semantic HTML first
Native elements like <button> and <nav> come with built-in keyboard support and screen reader announcements for free β using a styled <div> instead loses all of that.
ARIA and alt text
aria-label provides an accessible name when visible text is insufficient. alt text on images and proper form labels are essential baseline requirements.
<button aria-label="Close dialog">×</button>(screen readers announce 'Close dialog' button)aria-label gives an accessible name when the visible symbol alone isn't descriptive.
<img src="chart.png" alt="Sales increased 20% in Q3">(screen readers describe the chart's meaning)Descriptive alt text conveys the same information visually and non-visually.
Key points
- Semantic HTML provides accessibility features by default.
- ARIA attributes supplement, not replace, semantic HTML.
- alt text and form labels are essential accessibility basics.
- Keyboard navigation should work without requiring a mouse.