Chapter 1 of ?
html 8 min read

HTML Mastery — Chapter 20: HTML Accessibility & ARIA

1. Web Content Accessibility Guidelines (WCAG 2.2 POUR Principles)

Web Accessibility (a11y) ensures that web applications can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. The **WCAG 2.2** standard is structured around four core principles (**POUR**):

1. Perceivable

Information must be presentable to users in ways they can perceive (text alternatives for images, transcripts for audio, color contrast ≥ 4.5:1).

2. Operable

Interface controls must be operable via keyboard (`Tab`, `Space`, `Enter`). Provide visible focus indicators and skip navigation links.

3. Understandable

Information and operation must be understandable. Form inputs must feature clear labels and explicit error messages.

4. Robust

Content must be robust enough to be interpreted reliably by screen readers (NVDA, JAWS, VoiceOver) and future user agents using semantic HTML.

Semantic HTML vs Non-Accessible Markup

accessibility-best-practices.html
<!-- ❌ BAD: Inaccessible div button (Not keyboard focusable) --> <div class="btn" onclick="submitForm()">Submit Form</div> <!-- ✅ GOOD: Native semantic button (Keyboard focusable, screen reader accessible) --> <button type="submit" class="btn btn-primary">Submit Form</button> <!-- ✅ GOOD: Image with meaningful alternative text --> <img src="chart.png" alt="Bar chart showing 35% revenue growth in Q3 2026">
Try It Yourself »
Try It Yourself — WCAG Contrast & Alt-Text Inspector

Test color contrast and alt-text validation on sample elements:

2. Accessible Names: aria-label, aria-labelledby & aria-describedby

Screen readers compute an Accessible Name for every interactive element. When native HTML labels are unavailable (e.g. icon-only buttons), ARIA attributes supply the accessible name and description.

Screen Reader Navigation Hierarchy & Accessible Name Calculation Flow
1. aria-labelledby="id1 id2" Highest Precedence (References IDs) 2. aria-label="Direct Text" Direct String Name 3. Native <label> / Inner Text Fallback (Button Text / alt attribute) aria-describedby="help-text-id" Provides secondary helper text or validation error message read after the main accessible name.

Applying ARIA Labeling Attributes

<!-- 1. Icon-Only Button with aria-label --> <button aria-label="Close modal dialog" class="icon-btn"> <i class="fas fa-times"></i> </button> <!-- 2. Input referenced via aria-labelledby --> <h4 id="billing-title">Billing Street Address</h4> <input type="text" aria-labelledby="billing-title"> <!-- 3. Helper text referenced via aria-describedby --> <label for="pwd">Password</label> <input type="password" id="pwd" aria-describedby="pwd-rules"> <p id="pwd-rules">Must contain at least 8 characters and one symbol.</p>
Try It Yourself »
Try It Yourself — Screen Reader Accessible Name Calculator

Click to test computed accessible names on ARIA-labeled elements:

Icon button with aria-label="Download Full PDF Certificate"

3. ARIA Landmark Roles & Page Structure

Screen reader users navigate web pages primarily by jumping between Landmarks. HTML5 semantic tags automatically map to native ARIA landmark roles.

ARIA Landmark Map & Screen Reader Landmark Navigation
<header> (role="banner") & <nav> (role="navigation") <main id="main-content"> (role="main") <aside> (role="complementary") <footer> (role="contentinfo")

Skip Navigation Link Pattern

<!-- Skip Link placed as very first focusable body element --> <a href="#main-content" class="skip-link"> Skip to main content </a> <!-- Main Content Container --> <main id="main-content" tabindex="-1"> <h1>Page Headline</h1> </main>
Try It Yourself »
Try It Yourself — ARIA Landmark Map Visualizer

Click to highlight all ARIA landmark regions detected on the active page:

4. Live Regions (aria-live) & Focus Management

When content updates dynamically on screen (toast alerts, chat messages, form validation), screen readers must be notified without stealing keyboard focus.

Attribute Value Screen Reader Speech Behavior
aria-live="polite" Waits until screen reader finishes reading current speech queue before announcing changes.
aria-live="assertive" Interrupts current screen reader speech immediately to read urgent alert payloads.
aria-atomic="true" Forces screen reader to announce the entire region contents instead of just modified text nodes.

Live Region & Focus Management Pattern

<!-- Live Region for Status Updates --> <div id="status-alert" aria-live="polite" aria-atomic="true" class="sr-only"></div> <script> function notifyUser(message) { const alertBox = document.getElementById('status-alert'); alertBox.textContent = message; // Screen reader automatically speaks message! } // Focus Management (Programmatic Focus) const targetHeading = document.getElementById('new-section'); targetHeading.setAttribute('tabindex', '-1'); targetHeading.focus(); // Shift focus seamlessly </script>
Try It Yourself »
Try It Yourself — Live Region Announcement Simulator

Trigger polite vs assertive live announcements to observe screen reader queues:

aria-live status: Listening for live updates...

5. Interactive Project: Accessibility Auditor & Keyboard Navigation Tester

Run a real-time accessibility audit on the active DOM page to detect WCAG compliance issues, missing form labels, unlabelled buttons, and missing ARIA landmarks.

Automated DOM Accessibility Auditing Script

function runAccessibilityAudit() { const issues = []; // Check 1: Images missing alt attribute document.querySelectorAll('img:not([alt])').forEach(img => { issues.push(`Image missing alt attribute: ${img.src}`); }); // Check 2: Form controls missing associated labels document.querySelectorAll('input:not([type="hidden"]), select, textarea').forEach(input => { if (!input.id || !document.querySelector(`label[for="${input.id}"]`)) { if (!input.hasAttribute('aria-label') && !input.hasAttribute('aria-labelledby')) { issues.push(`Form control missing label: #${input.id || input.name}`); } } }); return issues; }
Try It Yourself »
Try It Yourself — Real-Time Accessibility Auditor & Keyboard Tester

Click below to scan the active page for accessibility compliance violations live:

Hands-On Challenge: Fix Accessibility Violations in an Unaccessible Form

Fix an unaccessible registration form by adding explicit <label for="..."> tags, aria-describedby validation error messages, and aria-live status alerts.

Launch Code Playground & Try »

Chapter 20 Key Takeaways

  • Follow WCAG 2.2 POUR principles (Perceivable, Operable, Understandable, Robust).
  • First rule of ARIA: Prefer native semantic HTML elements over custom ARIA roles.
  • Use aria-label and aria-labelledby for explicit accessible names; use aria-describedby for secondary helper text.
  • Structure pages with ARIA Landmark roles (`role="banner"`, `role="navigation"`, `role="main"`).
  • Use aria-live="polite" for non-disruptive announcements and aria-live="assertive" for urgent alerts.
Done with this chapter?
Mark it complete to track your progress and unlock your certificate.
Next Up
—

Learner Reviews

Write a Review
Share your experience to help other learners.
Your Rating *
★ ★ ★ ★ ★