ARIA (Accessible Rich Internet Applications)
📌 Covered in this chapter:
WAI-ARIA Overview · ARIA Roles · aria-label & aria-labelledby · aria-expanded & aria-hidden · aria-live & aria-invalid · When NOT to use ARIA · Custom Accessible Widgets
Welcome to Phase 10 (Chapter 26): ARIA! WAI-ARIA attributes extend HTML markup to bridge accessibility gaps in dynamic rich internet applications.
1ARIA Accordion Toggle Example
HTML — ARIA Expanded State Control
▶ Run in HTML Editor
<button aria-expanded="false" aria-controls="faq1" onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false')">
Toggle Answer
</button>
<div id="faq1" role="region" aria-label="FAQ Content">Answer text content...</div>