1.7 Content within collapsed field announced by screen readers (Positive)

1.7.1 WCAG 1.3.1 (A), 4.1.2 (A) - Android

The expandable buttons on the ‘Tell Us About Your Client’s Dependants’ page do not work as intended with screen readers. Users should be informed that the element is expandable, and they can then choose to access the additional information by interacting with the button. However, this additional information is announced when the collapsed button receives focus.

This element behaves differently across different screen readers:

  • With JAWS, all the content within the expandable section is announced as soon as the button receives focus.

  • With NVDA, the content is unexpectedly announced only on tabbing backwards (using Shift+Tab) to the collapsed button.

  • With VoiceOver, the first lines of the paragraph are announced, as outlined in Hint text not completely announced on iOS (Observation) .

  • The element works as intended on Android. Users are informed that the element is expandable, and the content can be accessed if users interact with the button to expand it.

This behaviour can be confusing for screen reader users: they are informed that the element is currently in its collapsed state but are still subject to an excess of additional information. They may not understand the information being presented to them and would not be able to expand the element, which would negatively impact their experience.

Collapsed link on Tell Us About Your Clients Dependants page

FIGURE 1.9: Collapsed link on Tell Us About Your Clients Dependants page

Tabbing backwards to the collapsed button with NVDA Speech Viewer activated

FIGURE 1.10: Tabbing backwards to the collapsed button with NVDA Speech Viewer activated

1.7.2 Code Snippet

<details>
  <summary>
      <span> 
       What we mean by child dependants 
      </span>
  </summary>
  <div class="govuk-details__text">
      <p> 
       A child dependant is one who... 
       </p>
      ...
   </div>
</details>

1.7.3 Recommendation

It is unclear why this issue occurs only on this page since the component works as intended on other pages with collapsible sections. Further inspection of the code and classes may be necessary to fully understand and resolve this behaviour.

It is important to ensure consistent behaviour across different devices and browsers to provide users with a uniform experience, regardless of the device that they are accessing it from.

1.7.4 Spot check: April 2024

This issue has been resolved. Screen readers no longer announce the information within these collapsable elements unless the user chooses to interact with it.

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