ARIA Attributes Cheat Sheet

1. Naming and Labeling Attributes

Attribute	Purpose	Example
aria-label	Provides an accessible name (text label)	<button aria-label="Close menu"></button>
aria-labelledby	References one or more elements that label this	<div aria-labelledby="header1">...</div>
aria-describedby	References element(s) that describe this element	<input aria-describedby="hint1">
aria-valuetext	Overrides the text representation of a value	<div role="slider" aria-valuetext="Halfway"></div>

---

2. State and Property Attributes

Attribute	Purpose	Values / Usage Examples
aria-hidden	Hides element from assistive tech	"true" or "false"
aria-disabled	Indicates element is disabled	"true" or "false"
aria-checked	Check state for checkbox, radio, or menuitemcheckbox	"true", "false", or "mixed"
aria-selected	Indicates selection in list, grid, tablist, etc.	"true" or "false"
aria-expanded	Shows if expandable element is expanded	"true" or "false"
aria-pressed	Toggle button pressed state	"true", "false", or "mixed"
aria-required	Marks input as required	"true" or "false"
aria-readonly	Element is read-only	"true" or "false"
aria-busy	Indicates loading or updating content	"true" or "false"

---

3. Relationships and Ownership Attributes

Attribute	Purpose	Example
aria-controls	Identifies element(s) controlled by this element	<button aria-controls="menu1">Toggle Menu</button>
aria-owns	Creates a parent/child relationship not in DOM	<div aria-owns="item1 item2">...</div>
aria-activedescendant	Identifies currently active child element	<input aria-activedescendant="option3">
aria-flowto	Indicates next element in reading order	<div aria-flowto="section2">...</div>

---

4. Live Region Attributes

Attribute	Purpose	Values / Usage Examples
aria-live	Announces dynamic updates to assistive tech	"off", "polite", "assertive"
aria-atomic	Whether updates are presented as a whole or partial	"true" or "false"
aria-relevant	What types of changes are relevant for announcements	"additions", "removals", "text"

---

5. Widget-Specific Attributes

Attribute	Purpose	Example / Values
aria-valuenow	Current value for slider, spinbutton, progressbar	<div role="slider" aria-valuenow="50">
aria-valuemin	Minimum value	<div role="slider" aria-valuemin="0">
aria-valuemax	Maximum value	<div role="slider" aria-valuemax="100">
aria-colcount	Number of columns in a grid or table	<table aria-colcount="5">
aria-rowcount	Number of rows in a grid or table	<table aria-rowcount="10">
aria-colindex	Index of column	<td aria-colindex="3">
aria-rowindex	Index of row	<tr aria-rowindex="2">

---

6. Modal and Dialog Attributes

Attribute	Purpose	Example
aria-modal	Indicates a modal dialog	<div role="dialog" aria-modal="true">...</div>
aria-describedby	Description for dialog or alert	<div id="desc1">Form is required</div><div role="alert" aria-describedby="desc1">Error</div>

---

7. Miscellaneous Attributes

Attribute	Purpose	Example
aria-live	Live region announcements	<div aria-live="polite">Content updated</div>
aria-atomic	Atomic updates of live region	"true" or "false"
aria-haspopup	Indicates presence of popup/menu/dialog	<button aria-haspopup="true">Open Menu</button>
aria-level	Heading or treeitem level	<h2 role="heading" aria-level="2">Section title</h2>

---

Notes and Best Practices

• Prefer native HTML semantics before using ARIA attributes.

• Use ARIA to enhance accessibility for custom or complex widgets.

• Combine ARIA roles and attributes for clear, rich information.

• Test your pages with screen readers and keyboard navigation.

• Avoid overusing aria-hidden="true" which can hide content from assistive tech unintentionally.