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

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.15: Expandable element on Client Employment Income page

1.10.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.10.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.