4.1.2.A Use the aria-expanded attributes for the menu items, button (high)
As Hugh,
I want that the role or the attribute of a menu item or button is well used,
So that the user experience with the screen reader is improved with appropriate information announced.
Issue | Examples | Description | Code used | Recommendation | Impact |
---|---|---|---|---|---|
21 |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 ![]() |
Selected item is not communicated: Visually, it is clear that the selected option in the pop-up is "Identifier"; however, this is not communicated via markup. The button that expands the menu has an 'aria-pressed' attribute rather than an 'aria-expanded' attribute. So screen reader users will not know which option is selected when they use the menu. The function of the trigger button might not be clear as it is announced as a "toggle button". |
![]() ![]() |
For the menu items, use the role "menuitemradio" and add the attribute 'aria-checked'. Ensure the value of 'aria-checked' is "true" for the selected option and "false" for the other options. Ideally, use the 'aria-expanded' role on the trigger button instead of 'aria-pressed'. ![]() ![]() |
medium |
22 |
.Stat Data Explorer (BETA) ![]() |
Clicking a homefacets ("browse by" button) expands or collapses information panels. This is clear visually; however, it is not communicated via text or markup. So screen reader users will not know that clicking the button expands new content. | ![]() |
Add the attribute aria-expanded="false" to the button and dynamically change the value to "true" when the content is expanded and "false" when the content is collapsed. This communicates the functionality and state to screen reader users. ![]() Note: when collapsed the content has the CSS rule "display:none". This is good accessibility practice. |
high |
'' |
.Stat Data Explorer (BETA) In search result page: - the description expand/collapse ![]() ![]() ![]() |
The button that expands details is placed below the expanding content in the DOM, therefore, it should be mentioned in the label that the content expands above the button. | ![]() |
Include the 'aria-expanded' attribute to communicate the state to users. ![]() |
|
23 |
.Stat Data Explorer (BETA) ![]() ![]() |
Buttons located next to filter content have expand functionality, which open another level of filters for users. The aria label "Navigate to lower level" does not describe the functionality clearly. Additionally, the buttons do not have the aria-expanded attribute. So screen reader users may be confused by the functionality of the buttons. | ![]() |
Add the attribute aria-expanded to the button. The value should be set to false when the subsection is collapsed, and changed to true when it has been opened. Additionally, change the aria label to better describe the button functionality, removing language that implies a link/change of page. ![]() |
low |
'' | REMOVED AS NO MORE SCOPELIST | ||||
'' | ![]() |
The buttons used to clear filters have aria-labels, which repeat the visual text of the button. The "clear" functionality is implied by the 'x' icon, however, the functionality is not represented in the button label. This is because the delete text is on a nested button which is overwritten by an aria-label. | It is recommended to remove the nesting of buttons as per issue 4.1.1.A. Nested interactive elements #821 (closed) |
Annoucement in screen reader:
Issue | Examples | Description | Code used | Recommendation | Impact |
---|---|---|---|---|---|
Tooltip | Filter items with tooltip (XXX EXEMPLE) | There is a double tab on the same item due to the tooltip with the focus which stays at the same place. The item label is read by the screen-reader after the second tab (the focus didn't move) but a new information is mentioned without letting know what is this new information | Mention the item filter label first, do a pause and "tooltip". At the next tab, the related tooltip will be displayed "Complementary information". | ||
Applied Filters title | DE result Video 2024-01-09_18h22_30 | Applied Filters title is not focused which is normal but the focus arrives on the first item of the applied filters list without informed the users on the context of the items list and what action can be done (DE results, Data visualisation) | There is no focus on the "Applied filters" title and the number N as there is no action which is normal but when starting to focus on the first item of the Applied filters area, we should have a recap on the area the focus is: the screenreader should mentioned before reading the first focused filter/item label, "Applied filters list with x items" (or something similar). Also there is no mention on the type of the button (it's a clean button) so the user doesn't know what will happen if "Enter" key is pressed. The buttons about Frequency of observation and Annual are mentioned in the list as they are defined as button but no action are possible with them. | I'm confused with the fact the tab should not fo on inert information but the user should be aware of the applied filters??? | |
Applied filters | Example on DE result and viz pages (See video above) | No distinction between the filters and the filter items, it's a list of button items returned by the screen reader. | The screen-reader could mentioned before reading a filter On followed by the filter (from the example, we could have On Reference Area pause clean button then Australia pause clean button | ||
hierarchical filter with no data tickable/disable |
Edited by SSandrine