3.3: Roles, States, and Properties

Last updated
Save as PDF

Page ID: 15592

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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.

A link to an interactive elements can be found at the bottom of this page.

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.