1.2 Positive: Additional information presented in collapsible sections (Positive)

1.2.1 WCAG 1.3.1 (A), 4.1.2 (A) - Desktop, Mobile, iPad

Most pages of the website implement an expandable section containing relevant details. This provides additional information to users who require them, while other users are not presented with overload of content. This has the additional benefit of making the page look minimalistic and simple, which would positively impact the user’s experience.

The expandable sections are implemented both visually and programmatically, providing sighted and screen reader users with the same experience. This has been achieved using the <details> and <summary> elements. However, do note that this is not announced completely on iOS devices - see Expanded elements not announced as such on iOS (Low).

FIGURE 1.2: Expanded details on the Your Client’s Employment Income page

1.2.2 Code Snippet

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

---