A11Y 101: WAI-ARIA States


Let's look at all the possible WAI-ARIA states

9 Jun, 2022 ยท 2 min read

Now that we had a look at all the possible ARIA properties letโ€™s do the same for all of the states.

Itโ€™s good to remember that states are there to add what current state an element is in.

WAI-ARIA States list

  • aria-checked: Indicate the current checked state of input fields that can have this state
  • aria-disabled: Described if the element is currently disabled
  • aria-expanded: Describe if the element is expanded or collapsed.
  • aria-haspopup: Describe if the element has a popup and which type, values are: false, true, menu, listbox, tree, grid, or dialog.
  • aria-hidden: Indicate if the element is not visible
  • aria-invalid: Describe if the input is invalid or not.
  • aria-modal: Indicate whether the element is an active modal.
  • aria-multiline: Whether a texture accepts multiple lines.
  • aria-multiselectable: Used to describe elements with multiple selectable options, for example, a multiple select list.
  • aria-pressed: Describe if the current element is pressed.
  • aria-readonly: Describe if an input element is read-only.
  • aria-required: Describe if an element is required or not.
  • aria-selected: Wether the current option element is selected.
  • aria-busy: Used to indicate if the area is still loading or busy with something.
  • aria-atomic: Describe if a live region will announce all or only parts of the content.
  • aria-grabbed: Describe a grabbed state to a drag n drop active element.

We should also always see if there is no semantic alternative we can use.

For most of the form fields, this is the case. Letโ€™s look at aria-readonly and aria-required, for instance.

For input fields, we could do the following:

<input readonly required />

The main takeaway is only use these aria states if the semantics are insufficient to handle your condition.

Thank you for reading, and letโ€™s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

A11Y 101: Recap

11 Jun, 2022 ยท 2 min read

A11Y 101: Recap

A11Y 101: WAI-ARIA live

10 Jun, 2022 ยท 3 min read

A11Y 101: WAI-ARIA live

Join 2099 devs and subscribe to my newsletter