ARIA & Accessible HTML in HTML
From the HTML cheat sheet · Accessibility · verified Jul 2026
ARIA & Accessible HTML
Essential ARIA attributes and semantic patterns for accessible web pages
html
<!-- Label elements properly -->
<label for="email">Email:</label>
<input type="email" id="email" aria-required="true">
<!-- Describe with ARIA -->
<button aria-label="Close dialog">×</button>
<!-- Hide decorative content -->
<img src="divider.png" alt="" aria-hidden="true">
<!-- Live regions for dynamic updates -->
<div role="alert">Form submitted successfully!</div>💡 The best ARIA is no ARIA — use semantic HTML elements first (button, nav, main, label)
⚡ aria-label is for elements with no visible text; aria-labelledby points to existing text
📌 Always use alt="" (empty) for decorative images — missing alt is an accessibility violation
🟢 aria-live="polite" announces changes without interrupting; "assertive" interrupts immediately
ariaaccessibilitya11y