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.
`aria-invalid="true"`	Red border, error icon and red helper text on inputs, selects, textareas, checkboxes and select buttons. See validation.
`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, breadcrumb or dropdown, and the current step with `aria-current="step"` in steps. `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.

Role	Effect
`role="button"`	Styles a link or summary as a button.
`role="link"`	Styles any element as a link.
`role="switch"`	Turns a checkbox into a switch.
`role="search"`	A .group on or inside it gets pill ends, the same as in `<search>`.

Unavailable link

Iris CSS also reads three data attributes: data-theme for themes, data-tooltip for tooltips and data-placement for tooltips and popovers.