4.1.1.A Nested interactive elements (medium)
As a screen reader user,
I want that in content implemented using markup languages
- elements have complete start and end tags,
- elements are nested according to their specifications,
- elements do not contain duplicate attributes, and
- any IDs are unique, except where the specifications allow these features,
So that user agents such as screen readers are able to render the content correctly.
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
19 | .Stat Data Explorer (BETA) | Browse category options contained within the three Category drop down controls have been marked up as links within a button. So users may not be able to interact with the content correctly, as the button container overrides the behaviour of the links contained. Screen readers only announce the aria-label of the button. | Move the links outside the button element to ensure they are all announced and nested correctly. Additionally, wrap the links in list markup and remove the ASCII bullets (also see #808). The list bullets may be adjusted using CSS. Implement the headings in the expanding content as level 3 headings. |
|
'' | Implement the expanding homefacets buttons as level 2 headings. |
|||
'' |
.Stat Data Explorer (BETA) • Regional Statistics by Remoteness Structure (ASGS 2016), 2011-2020 |
Each filter is implemented as a button within a button. | Ensure the buttons are not nested - as the outer button does not seem to have any functionality, the outer button markup can be removed. Ensure the name of each used filter section ("Region", "Frequency", Time Period" etc.) is implemented as a level 4 heading - see Issue 8 |
Edited by Jens Dossé