1.1.1.A Use span list and aria-hidden attribute instead of special characters to describe text relationship (medium)
As Hugh,
I want that the special character/s to mention a relationship between elements is/are replaced by span tags and aria-hidden attribute: by using list markup to semantic value to the component and add visually hidden text to describe the relationship of the items,
So that the special character/s is/are not announced to the screen reader users.
Issue | Examples | Description | Code used | Recommendation |
---|---|---|---|---|
3 | ABS .Stat Data Explorer (BETA) FAO Outlook categorisation | On search results pages, categories and sub categories are listed below the individual result descriptions. The relationship between categories and sub-categories is clear visually through the use of icons, however this relationship may not be easily understood by screen readers. Accessibility-ScreenReader-Categorisation | <p class="MuiTypography-root jss472 MuiTypography-body2 MuiTypography-colorTextSecondary" data-testid="undefined_highlight_Religious Affiliation"> <strong> Religious Affiliation: </strong><span>Total > Christianity total > Other <em>Protestant</em> </span> </p> |
Ensure the special characters are not announced to screen reader users. This can be achieved by wrapping the characters in span tags and applying the aria-hidden attribute. Use list markup to semantic value to the component and add visually hidden text to describe the relationship of the items. <strong><span class="sr-only">Category pathway</span> Religious Affiliation: </strong><span role="list"><span role="listitem">Total <span aria-hidden="true">></span></span> <span role="listitem">Christianity total <span aria-hidden="true">></span>;</span><span role="listitem">Other <em>Protestant</em></span></span>
|
dimensions displays with dark dot symbol | when using the screen reader, the dot is not mentioned which is good but there is no pause at the dot level when reading the content specifically for the single dimension Accessibility-ScreenReader-SingleDimensions-Dimensions | same recommendation than above could help if possible |
Edited by SSandrine