> For the complete documentation index, see [llms.txt](https://samirandev.gitbook.io/accessibility/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://samirandev.gitbook.io/accessibility/aria-attributes-cheat-sheet.md).

# 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.