1.3.1.A Lists incorrectly marked up (high)
As a screen reader user,
I want that lists are correctly marked up using accessible tags,
So that assistive technologies such as screen readers correctly interpret lists (allowing users to easily navigate the list and know there are links/buttons in the list that they can interact with).
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
7 | .Stat Data Explorer (BETA) as the above image is no more relevant some aspect may have been corrected but the role still need to be corrected. | The list of filters is correctly marked up as list; however, there are elements between the parent <ul> element and the <li> elements. Additionally, the buttons that are implemented via <div> elements do not have the role="button" attribute. Screen reader users are not informed about the number of items in the list and cannot easily skip between list items or to the end of the list. Screen reader users will not know that the clickable items are buttons. |
Remove the ARIA attributes from the div elements that are between the <ul> element and the elements. Instead, provide the attribute role="presentation" for these elements as this removes the elements from the accessibility tree and enables screen readers to perceive the list as if the <li> elements were children of the <ul> element. Add the attribute role="button" to each of the <div> elements that are implemented as buttons.
|
|
'' |
|
------ | ------ |
|
'' | ------ | The parent element for the panel has an 'aria-labelledby' attribute that does not reference any active id-value on the page. Instead, the attribute contains the actual label value. This will not be announced by screen readers. | <div aria-labelledby="Census" id="Census" role="region"> |
It is recommended to replace the attribute with the 'aria-label' attribute. <div aria-label="Census" id="Census" role="region">
|
Edited by SSandrine