# ARIA attributes

Source: https://iriscss.com/documentation/accessibility/aria-attributes/

Iris CSS styles the attributes you already write for screen readers, so the look and the meaning stay in sync.

## States

| Attribute | Effect |
| --- | --- |
| `aria-busy="true"` | Shows a spinner. It blocks nothing, so pair it with `aria-disabled="true"` on a button. See [loader](https://iriscss.com/documentation/components/loader/index.html.md). |
| `aria-invalid="true"` | Red border, error icon and red helper text on inputs, selects, textareas, checkboxes and select buttons. See [validation](https://iriscss.com/documentation/form/validation/index.html.md). |
| `aria-invalid="false"` | Green border, check icon and green helper text. |
| `aria-current` | The hover look on links and buttons, the current page in a [pagination](https://iriscss.com/documentation/components/pagination/index.html.md), [breadcrumb](https://iriscss.com/documentation/components/nav/index.html.md#breadcrumb) or [dropdown](https://iriscss.com/documentation/components/dropdown/index.html.md), and the current step with `aria-current="step"` in [steps](https://iriscss.com/documentation/components/steps/index.html.md). `aria-current="false"` turns it off. |
| `aria-disabled="true"` | A not allowed cursor. Fades buttons, pagination links and labels. The element stays focusable, so your script must also ignore its clicks. Use it on links, which have no `disabled` attribute. |
| `disabled` | Fades buttons and form controls and shows a not allowed cursor. On a `fieldset` it covers every control inside. |
| `aria-controls` | A pointer cursor, since the element controls another one. Text fields, such as a combobox, keep the text cursor. |

## Roles

| Role | Effect |
| --- | --- |
| `role="button"` | Styles a link or summary as a [button](https://iriscss.com/documentation/elements/button/index.html.md). |
| `role="link"` | Styles any element as a [link](https://iriscss.com/documentation/elements/link/index.html.md). |
| `role="switch"` | Turns a checkbox into a [switch](https://iriscss.com/documentation/form/checkbox-radio-and-switch/index.html.md#switch). |
| `role="search"` | A [.group](https://iriscss.com/documentation/form/group/index.html.md) on or inside it gets pill ends, the same as in `<search>`. |

## Example

```html
<div class="cluster">
  <button class="primary" aria-busy="true">Saving</button>
  <button aria-current="true">Selected</button>
  <a href="#" aria-disabled="true">Unavailable link</a>
</div>
<input type="email" value="not an email" aria-invalid="true" aria-label="Email">
```

## Data attributes

Iris CSS also reads three data attributes: `data-theme` for [themes](https://iriscss.com/documentation/customize/themes/index.html.md), `data-tooltip` for [tooltips](https://iriscss.com/documentation/components/tooltip/index.html.md) and `data-placement` for tooltips and [popovers](https://iriscss.com/documentation/elements/popover/index.html.md#placement).