3.9 ‘Open’ link purpose unclear on Risk page (M)
3.9.1 WCAG 1.3.1 (A), 2.4.4 (A) - Desktop, Mobile, iPad
Under the ‘Scores History’ section, users are provided links to open the subsections to view more details. Visually, the purpose of the ‘Open’ link is made clear to users because of its proximity to the date—sighted users would be able to tell that clicking the link would be related to the date above.
Screen readers, however, only announce the element as “Open link.” This does not inform users of the context or the purpose of the link.
Screen reader users often view the list of links on a page to gain a better understanding of the content and layout. None of these ‘Open’ links is unique, and do not provide any information to screen reader users. When enough context is not provided, they will have to navigate the page using their directional arrow keys or click the link to see where it goes. This can be very frustrating.
Furthermore, the element performs the function of a button, not a link. This could also be confusing for screen reader users, who may expect clicking the link to take them somewhere. For more details, see Buttons are coded as links and dynamic updates are not announced by screen readers (H) .
FIGURE 3.10: Scores History links highlighted on Risk page with NVDA speech viewer activated
3.9.2 Code Snippet
<a href="#" class="govuk-link predictor-timeline__toggle-section"> Open </a>
3.9.3 Recommendation
Fulfilling one of the following will make the links accessible for screen reader users:
- Update the visual presentation of the links to provide more context to both sighted and screen reader users. For example, <a> View score history for 27 July 2022</a>
- Programmatically associate the link and the corresponding content using aria-describedby attribute to establish a relationship between the link and the content.
- Provide the context to screen reader users using a visually hidden span —this is how additional information is presented to screen reader users elsewhere on the site, so for consistency, we recommend this option.
For a positive example of links that have been programmatically associated with their context, see Positive: ‘View more details’ programmatically associated with context (P) .