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 Resolved Issues
    • 1.1 Site doesn’t allow for custom text spacing (Positive)
      • 1.1.1 Site doesn’t allow for custom text spacing
      • 1.1.2 Recommendation
      • 1.1.3 Spot check: April 2024
    • 1.2 Radio hint announcements are quite verbose (Positive)
      • 1.2.1 Radio hint announcements are quite verbose
      • 1.2.2 Recommendation
      • 1.2.3 Resources
      • 1.2.4 Spot check: April 2024
    • 1.3 Users not informed that link triggers a PDF download (Positive)
      • 1.3.1 WCAG 3.2.2 (A), 3.3.2 (A) - Mobile, iPad
      • 1.3.2 Recommendation
      • 1.3.3 Spot check: April 2024
    • 1.4 Dropdown items announced as not selected on receiving focus (Positive)
      • 1.4.1 WCAG 1.3.1 (A), 4.1.2 (A) -
      • 1.4.2 Code Snippet
      • 1.4.3 Recommendation
      • 1.4.4 Post-discussion Update
      • 1.4.5 Spot check: April 2024
    • 1.5 Fieldset not associated with a legend (Positive)
      • 1.5.1 WCAG 1.3.1 (A), 3.3.2 (A) - Desktop, Automated Finding
      • 1.5.2 Code Snippet
      • 1.5.3 Recommendation
      • 1.5.4 Spot check: April 2024
    • 1.6 Conditionally revealed fields not effectively announced by screen readers (Positive)
      • 1.6.1 WCAG 4.1.2 (A) - Android
      • 1.6.2 Recommendation
      • 1.6.3 Spot check: April 2024
    • 1.7 Content within collapsed field announced by screen readers (Positive)
      • 1.7.1 WCAG 1.3.1 (A), 4.1.2 (A) - Android
      • 1.7.2 Code Snippet
      • 1.7.3 Recommendation
      • 1.7.4 Spot check: April 2024
    • 1.8 No notification that feedback has been sent (Positive)
      • 1.8.1 WCAG 4.1.3 (AA) - Desktop, Mobile, iPad
      • 1.8.2 Recommendation
    • 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
      • 1.9.2 Recommendation
      • 1.9.3 Spot check: April 2024
    • 1.10 Confusing heading structure and hierarchy (Positive)
      • 1.10.1 WCAG 1.3.1 (A), 2.4.6 (AA) - Desktop, Mobile, iPad
      • 1.10.2 Recommendation
      • 1.10.3 Spot check: April 2024
    • 1.11 ARIA labels used on invalid div elements (Positive)
      • 1.11.1 WCAG 4.1.2 (A) - Desktop, Automated Finding
      • 1.11.2 Code Snippet:
      • 1.11.3 Spot check: April 2024
    • 1.12 Screen reader users not informed of feedback update (Positive)
      • 1.12.1 WCAG 4.1.3 (AA) - Desktop, Mobile, iPad
      • 1.12.2 Recommendation
      • 1.12.3 Spot check: April 2024
    • 1.13 Expanded elements not announced as such on iOS (Positive)
      • 1.13.1 WCAG 4.1.3 (AA), 4.1.2 (A) - iPad, iPhone
      • 1.13.2 Code Snippet
      • 1.13.3 Recommendation
      • 1.13.4 Resources
      • 1.13.5 Spot check: April 2024
      • 1.13.6 Spot Check update: July 2024
  • 2 Unresolved issues
    • 2.1 Some links open in a new tab without informing users in advance (Observation)
      • 2.1.1 Some links open in a new tab without informing users in advance
      • 2.1.2 Recommendation
      • 2.1.3 Resources
      • 2.1.4 Spot check: April 2024
    • 2.2 Purpose of the Back link could be more informative (Observation)
      • 2.2.1 Purpose of the Back link could be more informative
      • 2.2.2 Code Snippet
      • 2.2.3 Recommendation
      • 2.2.4 Spot check: April 2024
    • 2.3 Alternative options could be announced more clearly (Observation)
      • 2.3.1 Alternative options could be announced more clearly
      • 2.3.2 Code Snippet
      • 2.3.3 Recommendation
      • 2.3.4 Spot check: April 2024
    • 2.4 Acronyms could be expanded initially (Observation)
      • 2.4.1 Acronyms could be expanded initially
      • 2.4.2 Recommendation
      • 2.4.3 Spot check: April 2024
    • 2.5 Feedback buttons are not linked to the question prompt (Observation)
      • 2.5.1 Feedback buttons are not linked to the question prompt
      • 2.5.2 Code Snippet
      • 2.5.3 Recommendation
      • 2.5.4 Spot check: April 2024
    • 2.6 Hint text not completely announced on iOS (Observation)
      • 2.6.1 WCAG 1.3.1 (A), 4.1.2 (A) - iPad, iPhone
      • 2.6.2 Code Snippet
      • 2.6.3 Recommendation
      • 2.6.4 Spot check: April 2024
  • II Recommendations
  • 3 Suggested Next Steps
  • III Appendix
  • Contact Details
  • Prepared by User Vision for the Ministry of Justice

UV3073 MoJ Check If Your Client Qualifies for Legal Aid - Spot Check

1.4 Dropdown items announced as not selected on receiving focus (Positive)

1.4.1 WCAG 1.3.1 (A), 4.1.2 (A) -

On the Add Benefit Details page, users are presented with the option to select the benefit type, which they can select from a drop down menu. However, screen reader announcements of this element can be misleading, as each item is announced as being unselected even on receiving focus.

Interacting with the input field by typing in three letters causes the drop-down menu to appear. This is announced to users through the use of the the autocomplete attribute. However, when using the directional arrows keys to pick an option, screen readers announce it as “not selected”. For instance, the second option is announced as “Child Maintenance, not selected, 2 of 6” even when the option is receiving focus. This can be confusing for users since they would not know how exactly to select an option. Since every option is announced as “not selected”, users might believe that the component isn’t functional.

This particular issue occurs only on Windows devices and works as expected on a Mac. However, this component is problematic on mobile devices as well, as captured in [Dropdown menu not accessible with swipe gestures on mobile (Positive)] .

Dropdown options on Add Benefit Details page with NVDA speech viewer activated

FIGURE 1.4: Dropdown options on Add Benefit Details page with NVDA speech viewer activated

1.4.2 Code Snippet

<ul id="1-type-suggestions" role="listbox">
  <li role="option" tabindex="-1" aria-selected="false"> 
    Child Maintenance 
  </li>
    ...
</ul>

1.4.3 Recommendation

The aria-selected attribute should be updated to reflect the user’s selection. On receiving focus, the value should be updated to aria-selected="true".

However, we highly recommend using the native HTML <select> element for drop-down menus. These are designed to work efficiently across different devices and platforms. Listboxes can cause issues on certain platforms since browsers do not completely support their functionality with assistive technology, as outlined in [Dropdown menu not accessible with swipe gestures on mobile (Positive)] .

1.4.4 Post-discussion Update

On better understanding of the functionality of the component, we believe that the best solution would be to update the existing code to conform to HTML specification while maintaining the desired functionality. This can be implemented as an editable combobox with an autocomplete feature.

This would involve updating the code as per the recommendations highlighted in [Dropdown menu not accessible with swipe gestures on mobile (Positive)] and the linked resource. Remove the aria-selected="false" attribute since it can be confusing for screen reader users.

The combobox would ensure a visually and programmatically accessible experience. When users type in the text field, the list of suggestions is expanded–screen reader users are also informed of this. They can then navigate to each field using their directional arrows, and this will be announced as “Child Benefit 1 of 6” when the first item receives focus, “Child Maintenance 2 0f 6” when the second item receives focus and so on.

Thus, all users would be able to interact with and understand the purpose of the element. Screen reader users would be able to identify the role of the element and would know how to interact with the list to make a selection. The announcements would be informative yet succinct.

1.4.5 Spot check: April 2024

This issue has been resolved. Dropdown items are now announced correctly to screen reader users when they receive focus.

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