2. Introduction to WAI-ARIA

Roles, States, and Properties

The semantics described earlier are created by adding roles, states, and properties to HTML elements.

Roles

W3C definition of roles

“Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.”

Source: W3C

Examples of roles include menu, alert, banner, tree, tabpanel, textbox, and so on. Once assigned to an element, roles must not change over time or with user input. If, for instance, you wanted to change from a “menubar” while viewing in full screen mode to a toggle “menu” when viewed on a mobile device, the entire block of markup would change, rather than switching menubar for menu.

Roles are categorized into six groupings. Here are the groups with a few examples of each type:

  • Abstract role (not to be used by authors in content, the base for the WAI-ARIA ontology)
  • Widget roles (e.g., button, link, menuitem)
  • Document structure roles (e.g., article, feed, list, table)
  • Landmark roles (e.g., banner, navigation, main, complementary)
  • Live region roles (e.g., alert, log, timer)
  • Window roles (e.g., alertdialog, dialog)

Roles are typically added to HTML elements using the role attribute as follows. In the example below, an unordered list is given a role of menubar. Typically, this is used when creating a horizontal navigation bar across the top of a user interface. Each list item is given a role of menuitem.

Suggested Reading: Here is the full list of roles in WAI-ARIA 1.1.

States

W3C definition of states 

“A state is a dynamic property expressing characteristics of an object that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities. See: clarification of states versus properties.”

Source: W3C

States are used along with roles, typically, to define its functional status. States are much like properties, though they typically change while an application or widget is being used (e.g., aria-checked changes between true and false). Properties typically do not change (e.g., aria-labelledby keeps the same value). States and properties are all “aria-” prefixed, unlike roles.

Here are a few examples of states:

  • aria-busy
  • aria-checked
  • aria-expanded
  • aria-disabled
  • aria-hidden

Properties

W3C definition of properties

Attributes that are essential to the nature of a given object, or that represent a data value associated with the object. A change of a property may significantly impact the meaning or presentation of an object. Certain properties (for example, aria-multiline) are less likely to change than states, but note that the frequency of change difference is not a rule. A few properties, such as aria-activedescendant, aria-valuenow, and aria-valuetext are expected to change often. See clarification of states versus properties.”

Source: W3C

Properties, as mentioned above, are much like states in how they are used along with roles. However, unlike states that change, properties tend to remain the same (though this is not a rule). Intuitively, you may notice the changing nature of states listed above, and the static nature of properties listed below.

Here are a few examples of properties:

  • aria-describedby
  • aria-atomic
  • aria-autocomplete
  • aria-colcount
  • aria-colspan
  • aria-controls
Suggested Reading:  See the WAI-ARIA Specification for a full list of states and properties.

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Web Accessibility for Developers by Ryerson University, The Chang School is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book