Accessibility and ARIA
Accessibility means making your website usable for everyone — including people who are blind, deaf, have motor disabilities, or use assistive technologies like screen readers. HTML already has great built-in accessibility. ARIA (Accessible Rich Internet Applications) fills the gaps.
Built-in HTML Accessibility
Example 1 — Accessible Navigation
<!-- aria-label names the nav for screen readers --> <nav aria-label="Main navigation"> <ul> <!-- aria-current marks active page --> <li><a href="/" aria-current="page">Home</a></li> <li><a href="/courses">Courses</a></li> </ul> </nav> <!-- Skip link: lets keyboard users skip nav --> <a href="#main-content" class="skip-link"> Skip to main content </a> <main id="main-content"> ... </main>
aria-label="Main navigation" helps when a page has multiple nav elements. Screen readers announce "Main navigation, navigation landmark".
ARIA Roles and States
Example 2 — ARIA for Interactive Elements
<!-- aria-expanded for accordion/dropdown --> <button aria-expanded="false" aria-controls="faq-answer" >What is HTML?</button> <div id="faq-answer" hidden> HTML is HyperText Markup Language... </div> <!-- aria-live for dynamic content updates --> <div aria-live="polite" id="status"></div> <!-- aria-label for icon buttons --> <button aria-label="Close dialog">×</button>
aria-live="polite" announces content changes to screen readers. Use this for loading states, search results, or form validation messages.
Key ARIA Attributes
aria-labelNames an element. Use when no visible text label exists (icon buttons, nav regions).
aria-labelledbyPoints to another element's ID that labels this one. Better than aria-label when a heading exists.
aria-describedbyPoints to an element that describes this one. Use for form input hints.
aria-hidden="true"Hides decorative elements from screen readers. Use for icons, dividers, animations.
roleOverrides the semantic meaning. Use sparingly — prefer real semantic HTML elements.
Accessibility = Better SEO
Google uses the same accessibility signals as screen readers. alt text, heading structure, meaningful link text, ARIA labels — these all help Google understand your page AND help blind users. Accessible pages rank better.