3. Basic WAI-ARIA
Common Static WAI-ARIA
Much of the WAI-ARIA introduced so far is static. That is, it can be written directly into HTML elements as attributes, their values typically do not change, and they do not require scripting to control their behaviour. Landmarks and roles, for example, are all static. Anyone who knows how to read and write HTML can make use of these attributes by simply adding them to HTML elements. WAI-ARIA properties are also typically static, though not always.
As discussed earlier, static WAI-ARIA often consists of properties given to define specific characteristics of an HTML element that has a particular functional role. For example, a nested list may be defined as a menu using role="menubar"
to define the top-level list and role="menu"
to define sublists.
List items in the top-level list that have a nested sublist would be given the attribute aria-haspopup="true"
(or aria-haspopup="menu"
). Thus, when encountered by assistive technology, a list item with this attribute will announce that a submenu is present (e.g., “menu with submenu” when using ChromeVox).
Try This: Using ChromeVox, navigate through the menu bar widget example below, created by Hans Hillen at the Paciello Group, to hear how submenus are announced. Open this demo in a new window.
Frequently Used WAI-ARIA Attributes
You have already been introduced to a few static attributes. Those and a handful of others you are likely to use regularly are listed here. This is not a full list. Follow the links and read through their descriptions.