Accessibility (ARIA)
5 min read
ARIA attributes make dynamic content accessible. aria-label provides names, aria-expanded indicates open/closed state, aria-live announces updates to screen readers, and role defines an element's purpose.
ARIA — Accessible Rich Internet Applications
<!-- Roles -->
<div role="dialog" aria-modal="true" aria-labelledby="title">
<!-- Live regions -->
<div aria-live="polite">Loading...</div>
<!-- Labels -->
<button aria-label="Close dialog">×</button>
<!-- State -->
<button aria-expanded="false">Menu</button>
<!-- Screen-reader only text -->
<span class="sr-only">(opens in new tab)</span>