HTML Accessibility Deep Dive
Master HTML accessibility — ARIA roles, states, properties, landmark regions, and building fully accessible interactive components.
50 min•By Priygop Team•Last updated: Feb 2026
ARIA Deep Dive
- ARIA Roles: role='button', role='dialog', role='navigation' — define what an element IS for assistive technology. Use when semantic HTML isn't sufficient
- ARIA States: aria-expanded='true', aria-selected, aria-checked — communicate dynamic state changes to screen readers. Update with JavaScript as state changes
- ARIA Properties: aria-label, aria-labelledby, aria-describedby — provide accessible names and descriptions. aria-labelledby references another element's text
- Live Regions: aria-live='polite' — announce dynamic content changes. 'polite' waits for user idle, 'assertive' interrupts immediately. Use for notifications, status updates
- ARIA Landmarks: role='banner', 'main', 'contentinfo', 'navigation', 'search' — semantic HTML (<header>, <main>, <footer>, <nav>) provides these automatically
- First Rule of ARIA: Don't use ARIA if a native HTML element provides the semantics — <button> is always better than <div role='button'>. Native elements have built-in keyboard handling
Accessible Components
- Modal Dialogs: Focus trap (Tab cycles within modal), Escape closes, aria-modal='true', return focus to trigger element on close. <dialog> element provides most of this
- Tabs: role='tablist' + role='tab' + role='tabpanel'. Arrow keys navigate between tabs, Tab moves to panel content. aria-selected on active tab
- Accordions: <details>/<summary> provides native accordion — keyboard accessible, screen reader friendly. For custom: role='button' + aria-expanded + aria-controls
- Skip Navigation: <a href='#main-content' class='skip-link'>Skip to content</a> — first focusable element on page. Visible on focus. Lets keyboard users skip repetitive navigation
- Form Accessibility: Every input needs a <label for='id'>. Required fields: aria-required='true'. Error messages: aria-describedby pointing to error text. Group related fields with <fieldset>/<legend>
- Testing: NVDA (Windows), VoiceOver (Mac/iOS), TalkBack (Android) — test with real screen readers. axe DevTools for automated checks. Keyboard-only testing catches most issues