5.2 Further input context not provided to screen reader users (M)

5.2.1 WCAG 1.3.1 (A) - Desktop

On the Recommendations Circumstances page and the Vulnerability and Additional Needs page, additional input information is provided that would help users make a selection.

On the Recommendations Circumstances page, this information involves a separation of the input options based on ‘Standard’ or ‘Additional’ licence conditions. On the Vulnerability and Additional Needs page, users can select an input from one of three subgroups: None (or) Not Known (or) an option from the list provided. This information is presented visually, using subheadings and/or spacing to make a distinction.

However, this information is not announced by screen readers when navigating through the input options:

• While the ‘Standard’ or ‘Additional’ licence conditions on the Recommendations Circumstances page are coded as Level 2 headings, this information is not associated with the input checkboxes, so screen reader users might miss out on this categorisation.
• On the Vulnerability page, this information is only accessible if navigating using the directional arrow keys, which screen reader users might be unlikely to do when interacting with form-based inputs. They might miss out on the grouping of the input options, and might be unaware that selecting an option from one grouping would deselect the options from the other two groups. Especially because these are checkboxes, and the expected behaviour for checkboxes is that multiple options can be selected.

FIGURE 5.2: Standard license conditions highlighted on Recommendations Circumstances page

FIGURE 5.3: Additional license conditions highlighted on Recommendations Circumstances page

FIGURE 5.4: Input options with NVDA speech viewer on the Vulnerability and Additional Needs page

5.2.2 Code Snippet

On the Recommendations Circumstances page:

<h2> Additional licence conditions </h2>
<input type="checkbox" aria-describedby="additional-hint-1">
    <label for="additional-1">
         Curfew (Police Checks Only)
    </label>

On the Vulnerability and Additional Needs page:

<div class="govuk-checkboxes__divider"> or </div>
<div class="govuk-checkboxes__item">
<input id="option-2" type="checkbox" checked="" aria-expanded="true">
    <label for="option-2">
        Warnings / licence breach letters
    </label>
</div>

5.2.3 Recommendation

Ensure that screen readers announce this additional context when users navigate through the input options. This could be achieved by making the <div> or <h2> element focusable by adding a <tabindex="0"> to the tag. For example: <h2 tabindex="0"> Additional licence conditions </h2>

---