Accessibility Deep Dive & ARIA Roles
Lesson 17 • Advanced Track
What You'll Learn
💡 Think of It Like This
ARIA is like adding subtitles to a movie. The movie (your webpage) already has visual cues, but subtitles (ARIA attributes) make the same information available to people who can't see the screen. However, if the movie already has dialogue (semantic HTML), you don't need to add subtitles that repeat what's already spoken.
The #1 Rule of ARIA: Don't use ARIA if a native HTML element already does the job.
| Instead of ARIA... | Use Native HTML |
|---|---|
<div role="button"> | <button> |
<div role="navigation"> | <nav> |
<span role="heading"> | <h1>–<h6> |
<div role="link"> | <a href> |
<div role="checkbox"> | <input type="checkbox"> |
ARIA Labels & Descriptions
Use aria-label when there's no visible text, and aria-labelledby to reference existing text on the page.
ARIA Labelling Techniques
Provide accessible names for interactive elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARIA Labels</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
.example {
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
h2 { color: #3b82f6; margin-bottom: 10px; }
h3 { color: #22c55e; margin: 20px 0 8px; font-size: 1rem; }
but
...Live Regions & Dynamic Content
When content updates dynamically (like form errors or notifications), use aria-live to announce changes to screen readers.
ARIA Live Regions
Announce dynamic updates to assistive technology
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARIA Live Regions</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
button {
background: #3b82f6;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
margin: 5px;
}
button:hover { backgroun
...Keyboard Navigation & Focus Management
All interactive elements must be keyboard-accessible. Use tabindex to control focus order and :focus-visible for visible focus indicators.
⚠️ Common Mistakes
- Using ARIA when native HTML works —
<button>already has role="button" and keyboard support. Addingrole="button"to a div is a poor substitute. - Removing focus outlines — Never use
outline: nonewithout providing an alternative focus indicator. - Forgetting aria-live on dynamic content — If content updates without a page reload, screen readers won't notice unless you use a live region.
- Using tabindex > 0 — Positive tabindex values create unpredictable tab order. Stick to 0 (in natural order) or -1 (programmatic only).
🎉 Lesson Complete
You've mastered ARIA and advanced accessibility techniques:
- ✅ Use native HTML first — ARIA is a supplement, not a replacement
- ✅
aria-labelfor invisible names,aria-labelledbyfor visible ones - ✅
aria-liveregions announce dynamic changes to screen readers - ✅ Always maintain visible focus indicators and logical tab order
Sign up for free to track which lessons you've completed and get learning reminders.