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: radio buttons associated to the question (Positive)
      • 1.1.1 WCAG 1.3.1 (A) - Desktop
      • 1.1.2 Code snippet
    • 1.2 Positive: Checkboxes programmatically associated with the question (Positive)
      • 1.2.1 WCAG 1.3.1 (A) - Desktop
      • 1.2.2 Code snippet
    • 1.3 Focus state of button elements doesn’t meet non-text colour contrast requirements (Medium)
      • 1.3.1 WCAG 1.4.11 (AA) - Desktop
      • 1.3.2 Recommendation
    • 1.4 Missing heading level (Low)
      • 1.4.1 WCAG 1.3.1 (A) - Desktop
      • 1.4.2 Recommendation
    • 1.5 Breadcrumb navigation could be improved (Low)
      • 1.5.1 WCAG 1.3.1 (A), 4.1.2 (A) - Desktop
      • 1.5.2 Code snippet
      • 1.5.3 Recommendation
      • 1.5.4 Resource
    • 1.6 Purpose of the Back link could be more informative (Observation)
      • 1.6.1 Purpose of the Back link could be more informative
      • 1.6.2 Code Snippet
      • 1.6.3 Recommendation
  • 2 Prisoner not hoping to work after release
    • 2.1 Positive: Change links programmatically associated to context (Positive)
      • 2.1.1 WCAG 1.3.1 (A) - Desktop
      • 2.1.2 Code snippet
    • 2.2 Text coded as a table (Medium)
      • 2.2.1 WCAG 1.3.1 (A), 2.4.3 (A) - Desktop, iPad
      • 2.2.2 Code snippet
      • 2.2.3 Recommendation
    • 2.3 Problematic column headers (Low)
      • 2.3.1 WCAG 1.3.1 (A) - Desktop
      • 2.3.2 Code snippet
      • 2.3.3 Recommendation
      • 2.3.4 Resources
    • 2.4 Remove link not associated with context (Observation)
      • 2.4.1 Remove link not associated with context
      • 2.4.2 Recommendation
    • 2.5 No space between elements on iPad (Observation)
      • 2.5.1 No space between elements on iPad
      • 2.5.2 Recommendation
  • 3 Induction for employed ex prisoners
  • 4 View full plan
    • 4.1 Visually hidden table column announced by screen readers (Medium)
      • 4.1.1 WCAG 1.3.1 (A) - Desktop
      • 4.1.2 Code snippet
      • 4.1.3 Recommendation
  • 5 Edit induction information
  • 6 Adding a goal
    • 6.1 Textarea not associated with the warning message (Observation)
      • 6.1.1 Textarea not associated with the warning message
      • 6.1.2 Code snippet
      • 6.1.3 Recommendation
  • 7 Editing a goal
  • II Recommendations
  • 8 Suggested Next Steps
  • III Appendix
  • Contact Details
  • Prepared by User Vision for the Ministry of Justice

UV2986 Ministry Of Justice - Learning and Work Progress

1.5 Breadcrumb navigation could be improved (Low)

1.5.1 WCAG 1.3.1 (A), 4.1.2 (A) - Desktop

Throughout the site, breadcrumbs are used to let users know where they are on the website. This can be helpful for sighted users to understand their current position and the navigation structure of the site.

However, this information is not as evident for screen reader users. The pages are announced simply as a list of links and users are not informed which page they are currently on. They may not realise the purpose of the links as they are not told it is breadcrumb navigation and may assume that these links are part of the page navigation menu.

Breadcrumb navigation highlighted on with NVDA speech viewer activated

FIGURE 1.6: Breadcrumb navigation highlighted on with NVDA speech viewer activated

1.5.2 Code snippet

<div>
  <ol>
    <li>
      <a href="...">Digital Prison Services</a>
    </li>
    <li>
      <a href="...">Manage learning and work progress</a>
    </li>
  </ol>
</div>

1.5.3 Recommendation

In its current implementation, it is not clear that these links represent a breadcrumb navigation via screen readers. Despite the current implementation adhering to GDS recommendations, we still suggest refactoring the links to be within a navigation element as opposed to a <div>. Label this <nav> element as a breadcrumb using aria-label="Breadcrumb" so that screen reader users are informed of its purpose. In addition, add aria-current="page" to the current page in the breadcrumb so that screen reader users are aware that the link will take them to the same page.

We would also recommend contacting GDS about this to understand if this has been raised elsewhere and to understand their take on this issue.

1.5.4 Resource

W3C breadcrumb navigation