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.


Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

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

Share This Book