ARIA States and Properties

This lesson explains ARIA States and Properties in web accessibility with clear examples, practical use cases, and implementation best practices.

ARIA States and Properties Overview

ARIA States and Properties provide additional information about the current status, behavior, and relationships of interactive elements. Unlike ARIA roles, which describe what an element is, ARIA states and properties describe how that element behaves or changes over time.

Dynamic web applications frequently update interface components without reloading the page. ARIA states and properties communicate these changes to screen readers, ensuring users receive accurate information while interacting with menus, dialogs, accordions, tabs, forms, and other custom widgets.

Category	Purpose
States	Represent values that change during user interaction.
Properties	Describe relationships and additional information.
Screen Readers	Announce dynamic updates accurately.
Custom Components	Improve accessibility for widgets.
WCAG Support	Helps meet accessibility requirements.
Best Practice	Keep ARIA values synchronized with the UI.

ARIA States Example

<button
  aria-expanded="false"
  aria-controls="menu">
  Menu
</button>

<ul id="menu" hidden>
  ...
</ul>

When the menu opens, the application should update aria-expanded from false to true so assistive technologies announce the correct state.

Common ARIA States and Properties

ARIA provides many attributes that describe the current state and relationships of interface components. The following are among the most frequently used in modern web applications.

Attribute	Purpose	Typical Usage
aria-expanded	Indicates expanded or collapsed state.	Accordions, menus, dropdowns.
aria-selected	Indicates the selected item.	Tabs, lists, grids.
aria-hidden	Hides content from assistive technologies.	Decorative content.
aria-disabled	Indicates a disabled control.	Custom buttons and widgets.
aria-controls	Associates one element with another.	Buttons controlling dialogs or menus.
aria-live	Announces dynamic content updates.	Status messages and notifications.

ARIA States and Properties Best Practices

Best Practice	Description
Update Dynamically	Keep ARIA values synchronized with interface changes.
Use Semantic HTML First	Only add ARIA when native HTML cannot provide the behavior.
Use Valid Values	Assign only supported values such as true and false.
Combine with Keyboard Support	ARIA does not automatically add keyboard functionality.
Test with Screen Readers	Verify announcements match the visual interface.
Follow WAI-ARIA Patterns	Implement recommended design patterns for custom widgets.

Common ARIA States and Properties Mistakes

Failing to update aria-expanded after opening or closing a menu.
Using aria-hidden on interactive elements.
Adding aria-disabled without preventing interaction.
Using aria-selected for components that are not selectable.
Adding aria-live to large sections of a page unnecessarily.
Using invalid or conflicting ARIA attribute values.
Ignoring keyboard accessibility when implementing custom widgets.
Not testing dynamic updates with screen readers.

Key Takeaways

ARIA states describe values that change during interaction.
ARIA properties describe relationships and additional information.
Update ARIA attributes whenever the interface changes.
Combine ARIA with semantic HTML, keyboard support, and focus management.
Use only the ARIA attributes required for your component.
Always verify dynamic behavior with screen readers and keyboard navigation.

Pro Tip

ARIA attributes should always reflect the actual state of your interface. If a menu is expanded, aria-expanded must be true. If a tab is selected, aria-selected must also be updated. Keeping ARIA synchronized with the UI is essential for an accessible user experience.