In this Easy ARIA tip, I will give you a bit of a hint on how to make not too complex, but still dynamic, menus accessible. We often encounter menus that pop in and out upon a mouse click or activation of an element using the keyboard.
An example can be found at this German blog site. Look for the “Archive” heading, which is a clickable element that shows or hides the archive choices offered by this blog.
Right now,NVDA speaks this item as “clickable”, so the blind user already gets notified that there is a possibility here to press Enter on the item and something will happen. Now how cool would it be if, in addition, NVDA would tell me that something will be expanded, or is currently expanded, and I can press Enter to collapse it?
Fortunately, we have WAI-ARIA to rescue us from this desire! 🙂
The global attribute aria-expanded is used for exactly this purpose. It takes one of two values: true or false. true means a section that this element denotes is currently expanded (visible), false means the expandable section or items is/are currently collapsed (invisible). In the above example, aria-expanded must be defined, and by default set to false. In the Javascript that handles the expansion and collapsing of the categories, another code block must be added to touch this attribute and change its value to true when the categories are made visible, and back to false when they are made invisible. Since there is already JavaScript in place to handle the visibility of the categories, this can be plugged in very easily.
There is one more piece to this: Modern screen readers such as NVDA, Orca or modern versions of the commercial screen readers, can also make use of another attribute that tells which element is actually being affected. In this case, the list of categories. This is done through an attribute called aria-controls. The value of this attribute is the ID of the affected element and is set either once or whenever the controlled element changes. In this example, the value would point to the html:ul element with the ID of “archivliste”. The attribute gets set on the same element that also gets aria-expanded and does all the magic. Screen readers then know which element is being referenced, by something called Accessible Relations.
In summary:
- aria-expanded receives a value of “true” when the elements in question are visible. It is set to “false” when those elements are actually not visible.
- aria-controls is set to the ID of the top level element that gets made visible or invisible.
Both attributes get set on the element that actually does the magic (the same element that has the onclick handler or click/keyboard event listener).
[Update] One word about placement of the expandable items: Ideally, they should be following the item that expands and collapses them, as can be seen in the example above. The list of archive months follows the heading that has the click handler to expand and collapse it. The result is that screen reader users can expand the items and simply down arrow without having to look for the new content. This makes it feel very natural and efficient.
Also, some screen readers have intelligent detection of dynamic changes and speak them automatically. This is sort of what WAI-ARIA live regions do, but without the explicit live region markup. The result is that upon expansion, the new items might automatically be spoken, which might be undesirable. For example, this list of months would be very undesirable to be rattled off by the synthesizer whenever the list gets expanded. To prevent this, another attribute can be applied, aria-live with its value set to “off”. This prevents supporting screen readers from ever treating this particular region as a live region. This attribute, however, in the example above, would go on the html:ul element, not the element that expands and collapses the list.
Thanks to Aaron Leventhal for these two excellent points![/update]
Previous Easy ARIA Tips 🔗
I'm an expert in web accessibility, particularly in the realm of ARIA (Accessible Rich Internet Applications). My depth of knowledge extends to the nuances of creating accessible menus, and I can confidently provide insights into implementing ARIA attributes to enhance user experiences for people with disabilities.
Now, diving into the content of the article, the author discusses an Easy ARIA tip related to making dynamic menus accessible. The primary focus is on utilizing WAI-ARIA attributes, specifically aria-expanded and aria-controls, to enhance the accessibility of interactive menus.
-
aria-expanded Attribute:
- The
aria-expandedglobal attribute is introduced as a solution to convey the current state of expandable sections within a web page. - It takes two values:
trueorfalse.trueindicates that the section denoted by the element is currently expanded and visible, whilefalsemeans the section is collapsed and invisible. - In the provided example,
aria-expandedis initially set tofalseby default. JavaScript is then used to dynamically change this attribute's value totruewhen categories are made visible and back tofalsewhen they are made invisible.
- The
-
aria-controls Attribute:
- The
aria-controlsattribute is introduced to specify which element is affected by the current action. In the article, it's mentioned that modern screen readers can utilize this attribute to understand which element is being referenced. - In the example, the value of
aria-controlspoints to the ID of the affected element, in this case, thehtml:ulelement with the ID of "archivliste."
- The
-
Placement of Expandable Items:
- The article suggests an ideal placement for expandable items. They should follow the item that triggers their expansion and collapse. This design facilitates a more natural and efficient experience for screen reader users.
-
aria-live Attribute:
- The article introduces the
aria-liveattribute with a value of "off" to prevent supporting screen readers from treating a specific region as a live region. - In the provided example, this attribute is recommended for the
html:ulelement rather than the element responsible for expanding and collapsing the list. It helps avoid automatic reading of new items upon expansion, providing more control over the user experience.
- The article introduces the
In summary, the article provides practical tips on using WAI-ARIA attributes to make dynamic menus accessible, with a focus on aria-expanded and aria-controls. Additionally, it touches upon the optimal placement of expandable items and introduces the use of aria-live to control how dynamic changes are announced by screen readers.
