ARIA States and Properties
ARIA attributes describe the current state of interactive elements: aria-expanded, aria-checked, aria-disabled, aria-hidden, aria-live.
HTML
Intermediate
4 min read
ARIA States and Properties
Example
<!-- Accordion button -->
<button aria-expanded="false" aria-controls="panel">
Section Title
</button>
<div id="panel" hidden>Panel content</div>
<script>
btn.addEventListener("click", () => {
const expanded = btn.getAttribute("aria-expanded") === "true";
btn.setAttribute("aria-expanded", !expanded);
panel.hidden = expanded;
});
</script>
<!-- Live region for dynamic content -->
<div aria-live="polite" id="status"></div>
<script>
document.getElementById("status").textContent = "Form saved!";
</script> Pro Tip
Use aria-live="polite" for non-critical updates; "assertive" for urgent errors.