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

When accessing the site on an iPhone or iPad, the status of expandable containers is not announced to VoiceOver users. For instance, on the ‘Your client’s employment income’ page, the first expandable element is announced as “Clients who are police officers, double tap to expand.” Even once the element is expanded, it is announced as “…double tap to expand” — users are not informed of the change in state.

Visually, the new content dynamically appears below the expanded element. Screen reader users, however, are not provided with this information. The expected behaviour for expandable elements is for them to be announced as “collapsed” or “expanded” based on their state, as is seen on desktop (see [Positive: Additional information presented in collapsible sections (Positive)] ). However, even on being expanded, the element continues to be announced as “Clients who are police officers, double tap to expand.” This would be confusing for screen reader users, who might not realise that the element has been expanded and that they can access the new content.

Expandable element on Client Employment Income page

FIGURE 1.19: Expandable element on Client Employment Income page

1.13.2 Code Snippet

<details open="">
  <summary>
      <span> 
        Clients who are police officers 
      </span>
  </summary>
  <div>
    <p> 
      If your client is a police officer, the...
    </p>
      ...
  </div>
</details>

1.13.3 Recommendation

Screen reader users should be informed of the element’s state. When collapsed, the state of the element should be announced as “double tap to expand”. On interacting with it, screen readers should announce “expanded” and the element should then be announced as “double tap to collapse”. This lets screen reader users know the current state of the element and informs them when new content is available.

This issue occurs because certain versions of iOS and VoiceOver do not have native support for the details and summary elements. Problems with the details element have been raised by AlphaGOV and it appears that some users are able to access the component as expected while others are not. A potential solution would be to implement a native <button> element with an aria-expanded attribute dynamically updated based on the user’s input.

1.13.5 Spot check: April 2024

This issue remains unresolved and is classified as a WCAG failure because it fails to properly announce states to VoiceOver users. Given the widespread use of iOS, this affects a significant number of users. One potential solution we’ve considered is to refactor the element from a details element to a GDS accordion. This adjustment would not only maintain similar functionality but also ensure accurate announcements for VoiceOver users. Additionally, the GDS design system advises using the details component only if there is a single section of content. Since this issue involves multiple details components, switching to accordion elements would be more suitable and align with GDS guidelines, thus ensuring optimal functionality for all users. We also recommend adopting the accordion component site-wide for consistent functionality, rather than using the details component.

1.13.6 Spot Check update: July 2024

This issue has been resolved. It was an iOS bug that prevented details components from announcing whether they were expanded or collapsed. The bug has been fixed in the latest iOS update.

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