1.9 Change links not programmatically associated with context (Positive)

1.9.1 WCAG 1.3.1 (A), 2.4.4 (A) - Desktop, Mobile, iPad

The Check Your Answers page presents users with the option to edit their previous options. This is presented visually with a ‘Change’ link adjacent to the heading of the section that users can edit. For sighted users, the purpose of this link is clear because of its position within a container, next the heading text. However, for screen reader users, this association is unclear.

When tabbing through the site with a screen reader, only the text “Change” is announced. As there are multiple such links, each announced as “change” on the page, screen reader users are not provided with the same level of information as sighted users. The purpose of these links could be confusing; users would have to navigate using their directional arrows to identify the section each link corresponds to. This causes a frustrating and time-confusing experience.

Sighted users can skim through a web page to get a quick overview of the content and functionality. Screen reader users often achieve this by going through certain elements of the page such as hyperlinks and buttons. Therefore, it is important to provide context to these interactive elements so that they know its purpose without having to navigate through additional content.

Similarly, when multiple elements have the same link text, screen reader users who navigate through the links using a list or heading structure may not be able to differentiate between them. They heavily rely on the link text to understand the destination or purpose of a link. If multiple links have identical link text, it becomes challenging for them to determine which link they want to follow.

This is similarly observed on the ‘Results’ page, where the ‘See Calculation’ links are not programmatically associated to the related heading.

FIGURE 1.13: Change links highlighted on the the Check Your Answers page

FIGURE 1.14: Calculation links on the Results page with NVDA speech viewer activated

1.9.2 Recommendation

Ensure that the link text is meaningful with its purpose made clear to all users.

The best method to achieve this is to make the displayed link text in itself meaningful and descriptive, such as:

<a> 
    Change Employment Status
</a>

Where this is not possible, or if it makes the page appear cluttered, ensure this additional context is also provided to screen reader users. This could be done by:

• Using a span element within the link that is visually hidden using CSS. E.g:

<a> 
  Change
 <span class="visually-hidden">  Employment Status </span>
</a>

• Using aria-label, e.g. <a aria-label="Change Employment Status"> Change </a>. Do note that using aria-label overrides the visually presented text for screen reader users.

1.9.3 Spot check: April 2024

This issue has been resolved. The change links are associated with their context using the aria-label attribute.

This has been changed from a ‘Low’ severity issue to a ‘Positive’ finding.

---