3.1 Positive: ‘View more details’ programmatically associated with context (P)

3.1.1 WCAG 1.3.1 (A), 2.4.4 (A) - Desktop, Mobile, iPad

On the Risk page, there are multiple containers (‘Who is at risk’, ‘Details of the risk’ etc.) with a button to view more. For sighted users, the purpose of this ‘View more detail’ button is made clear because of its position within the container—it is visually associated with the heading.

This association is made clear for screen reader users as well. When navigating through the page with a screen reader, the button is announced as “View more detail on who is at risk”, “View more detail on details of the risk” etc. This makes the purpose of the button obvious for screen reader users.

Button highlighted on Risk page with NVDA speech viewer activated

FIGURE 3.1: Button highlighted on Risk page with NVDA speech viewer activated

3.1.2 Code Snippet

<span class="govuk-details__summary-text">
     View more detail
     <span class="govuk-visually-hidden"> 
           on Details of the risk
     </span>
</span>