User Vision logo
  • Accessibility Audit
    • Executive Summary
    • Summary of Findings
    • WCAG 2.2 Overview
      • WCAG 2.2 Compliance
  • Project Background
    • Approach
    • How to use this report
    • Understanding our findings
  • I Findings
  • 1 Sitewide Findings
    • 1.1 Positive: Browser Zoom (Positive)
      • 1.1.1 WCAG 1.4.10 (AA), 1.4.4 (AA) - Desktop
    • 1.2 Positive: Additional information presented in collapsible sections (Positive)
      • 1.2.1 WCAG 1.3.1 (A), 4.1.2 (A) - Desktop, Mobile, iPad
      • 1.2.2 Code Snippet
    • 1.3 Positive: Error messages announced effectively (Positive)
      • 1.3.1 WCAG 3.3.1 (A), 4.1.3 (AA), 3.3.3 (AA) - Desktop, Mobile, iPad
    • 1.4 Positive: Status messages announced as page updates (Positive)
      • 1.4.1 WCAG 4.1.3 (AA) - Desktop, Mobile, iPad
    • 1.5 Skip link does not work on iOS (Positive)
      • 1.5.1 WCAG 2.4.1 (A) - iPad, iPhone
      • 1.5.2 Recommendation
      • 1.5.3 Resources
      • 1.5.4 Update
    • 1.6 Users not informed that link triggers a PDF download (Medium)
      • 1.6.1 WCAG 3.2.2 (A), 3.3.2 (A) - Mobile, iPad
      • 1.6.2 Recommendation
    • 1.7 No notification that feedback has been sent (Medium)
      • 1.7.1 WCAG 4.1.3 (AA) - Desktop, Mobile, iPad
      • 1.7.2 Recommendation
    • 1.8 Hint text not completely announced on iOS (Medium)
      • 1.8.1 WCAG 1.3.1 (A), 4.1.2 (A) - iPad, iPhone
      • 1.8.2 Code Snippet
      • 1.8.3 Recommendation
    • 1.9 Change links not programmatically associated with context (Low)
      • 1.9.1 WCAG 1.3.1 (A), 2.4.4 (A) - Desktop, Mobile, iPad
      • 1.9.2 Recommendation
    • 1.10 Expanded elements not announced as such on iOS (Low)
      • 1.10.1 WCAG 4.1.3 (AA), 4.1.2 (A) - iPad, iPhone
      • 1.10.2 Code Snippet
      • 1.10.3 Recommendation
      • 1.10.4 Resources
    • 1.11 Some links open in a new tab without informing users in advance (Observation)
      • 1.11.1 Some links open in a new tab without informing users in advance
      • 1.11.2 Recommendation
      • 1.11.3 Resources
    • 1.12 Site doesn’t allow for custom text spacing (Observation)
      • 1.12.1 Site doesn’t allow for custom text spacing
      • 1.12.2 Recommendation
    • 1.13 Purpose of the Back link could be more informative (Observation)
      • 1.13.1 Purpose of the Back link could be more informative
      • 1.13.2 Code Snippet
      • 1.13.3 Recommendation
    • 1.14 Acronyms could be expanded initially (Observation)
      • 1.14.1 Acronyms could be expanded initially
      • 1.14.2 Recommendation
  • 2 Client Details pages
    • 2.1 Dropdown menu not accessible with swipe gestures on mobile (Positive)
      • 2.1.1 WCAG 1.3.2 (A), 2.1.1 (A), 2.4.3 (A), 4.1.2 (A) - Mobile, iPad
      • 2.1.2 Code Snippet
      • 2.1.3 Recommendation
      • 2.1.4 Update
    • 2.2 Dropdown items announced as not selected on receiving focus (Medium)
      • 2.2.1 WCAG 1.3.1 (A), 4.1.2 (A) - Windows
      • 2.2.2 Code Snippet
      • 2.2.3 Recommendation
      • 2.2.4 Post-discussion Update
    • 2.3 Content within collapsed field announced by screen readers (Medium)
      • 2.3.1 WCAG 1.3.1 (A), 4.1.2 (A) - Android, Windows
      • 2.3.2 Code Snippet
      • 2.3.3 Recommendation
    • 2.4 Fieldset not associated with a legend (Low)
      • 2.4.1 WCAG 1.3.1 (A), 3.3.2 (A) - Desktop, Automated Finding
      • 2.4.2 Code Snippet
      • 2.4.3 Recommendation
    • 2.5 Conditionally revealed fields not effectively announced by screen readers (Low)
      • 2.5.1 WCAG 4.1.2 (A) - Android, Windows
      • 2.5.2 Recommendation
    • 2.6 Radio hint announcements are quite verbose (Observation)
      • 2.6.1 Radio hint announcements are quite verbose
      • 2.6.2 Recommendation
      • 2.6.3 Resources
    • 2.7 Alternative options could be announced more clearly (Observation)
      • 2.7.1 Alternative options could be announced more clearly
      • 2.7.2 Code Snippet
      • 2.7.3 Recommendation
  • 3 Check Your Answers page
    • 3.1 Confusing heading structure and hierarchy (Medium)
      • 3.1.1 WCAG 1.3.1 (A), 2.4.6 (AA) - Desktop, Mobile, iPad
      • 3.1.2 Recommendation
  • 4 Results Page
    • 4.1 ARIA labels used on invalid div elements (Low)
      • 4.1.1 WCAG 4.1.2 (A) - Desktop, Automated Finding
      • 4.1.2 Code Snippet:
  • 5 End of Service page
    • 5.1 Screen reader users not informed of feedback update (Low)
      • 5.1.1 WCAG 4.1.3 (AA) - Desktop, Mobile, iPad
      • 5.1.2 Recommendation
    • 5.2 Feedback buttons are not linked to the question prompt (Observation)
      • 5.2.1 Feedback buttons are not linked to the question prompt
      • 5.2.2 Code Snippet
      • 5.2.3 Recommendation
  • II Recommendations
  • 6 Suggested Next Steps
  • III Appendix
  • Contact Details
  • Prepared by User Vision for the Ministry of Justice

UV3015 Check If Your Client Qualifies for Legal Aid

1.9 Change links not programmatically associated with context (Low)

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.

Change links highlighted on the the Check Your Answers page

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

Calculation links on the Results page with NVDA speech viewer activated

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.