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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://samirandev.gitbook.io/accessibility/aria-attributes-cheat-sheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.