ARIA States & Properties

ARIA states and properties communicate the current condition and characteristics
of elements to assistive technologies. Where ARIA roles describe what an element
is, states and properties describe what it is doing and how it relates to other
elements.
^[1]

---

States vs properties

States are dynamic — they change in response to user interaction or
application logic. They must be updated in JavaScript as the UI changes.

Examples: aria-checked, aria-expanded, aria-selected, aria-disabled, aria-hidden

Properties are typically stable — they describe structural or relational
characteristics that do not change frequently.
^[2]

Examples: aria-label, aria-labelledby, aria-describedby, aria-required,
aria-haspopup, aria-controls

---

Commonly used states

aria-expanded
Indicates whether a collapsible element is open or closed. Required on the
trigger, not the panel. Update to aria-expanded="true" when the panel opens.
^[1]

aria-hidden
Hides an element and all its children from the accessibility tree. Use to
conceal decorative elements or off-screen content. Never apply to a focusable
element or a container with focusable children.

aria-checked
Reports the checked state of checkboxes, radio buttons, and toggle buttons.
Use "true", "false", or "mixed" for indeterminate checkboxes.

aria-selected
Indicates which option is selected in widgets like listboxes, tabs, and grids.

aria-disabled
Marks an element as disabled without removing it from the tab order or
accessibility tree. Differs from the HTML disabled attribute, which removes
the element from tab focus entirely.

aria-live
Announces dynamic content updates to screen readers without requiring focus
to move.
^[3]

Value	Behaviour
polite	Announced when the user is idle — use for most updates
assertive	Announced immediately, interrupting current speech — use only for urgent errors

---

Commonly used properties

aria-label
Provides an accessible name directly on the element. Use when no visible
label text is available.

aria-labelledby
References another element's ID as the accessible name. Preferred over
aria-label when a visible label already exists.
^[2]

aria-describedby
References an element that provides additional descriptive information —
error messages, hints, or instructions.

aria-required
Indicates that a form field must be completed before submission. Supplements
the HTML required attribute for custom form controls.

aria-controls
References the element whose content is controlled by the current element —
typically used with aria-expanded on disclosure and tab widgets.

aria-errormessage
References an element containing an error message for the current field.
Must be used alongside aria-invalid="true".
^[3]

---

Key rules

1. Always keep states in sync with visual state. An expanded panel with
   aria-expanded="false" is worse than no ARIA at all.
2. Do not use aria-hidden="true" on focusable elements or their parents.
3. aria-label overrides all other naming methods — use it carefully and
   keep values short and descriptive.
4. Test state changes with a real screen reader. The accessibility tree
   inspector in DevTools shows current values but cannot verify announcements.

---

References

1. W3C. WAI-ARIA 1.2 — States and Properties. https://www.w3.org/TR/wai-aria-1.2/#state_prop_def ↑
2. MDN Web Docs. ARIA States and Properties. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes ↑
3. W3C Web Accessibility Initiative. Understanding Success Criterion 4.1.2: Name, Role, Value. https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html ↑