1.3 Error summary skip links do not correctly move focus to date inputs (Medium)

1.3.1 WCAG 2.4.3 (A) - Desktop

On pages containing date inputs, the error summary includes internal links for each invalid question. For example, the summary might include a link labelled “Enter date of birth” pointing to #dateOfBirth.

However, these skip links do not correctly move keyboard focus when activated. Instead, activating the link scrolls to the container div with the id="dateOfBirth", but focus remains on the error summary link itself. When tabbing again, the keyboard focus continues to the next link in the summary instead of entering the inputs for the date of birth. This makes it difficult for keyboard and screen reader users to quickly correct errors in date fields.

The issue occurs because the skip link targets a div container, which is not focusable, rather than an actual input element such as the first field of the date input (e.g., day input).

FIGURE 1.3: Focus order of error summary page

1.3.2 Code Snippet

<li>
  <a href="#dateOfBirth">Enter date of birth</a>
</li>

<div id="dateOfBirth">
  <div>
    <label for="dateOfBirth-day">Day</label>
    <input id="dateOfBirth-day" name="dateOfBirth[day]" type="text">
  </div>
  ...
</div>

1.3.3 Sources

This behaviour affects all pages in the service where date inputs with multiple fields are used, including:

• Personal Details page (Enter date of birth)

• Monitoring Details page (start date of monitoring)

• Curfew on release day page (curfew start date)

1.3.4 Recommendation

Update error summary links so that they point directly to the first field of the date input group (e.g., day input). This will allow keyboard focus to move correctly to the relevant input, enabling users to start correcting their error immediately.

<li>
  <a href="#dateOfBirth-day">Enter date of birth</a>
</li>

---