Usability feedback: Error Links

[Sparrow0hawk]

Usability feedback

Error Links (Usability)

Error summary links do not link to the field in error, per GOV.UK Design System requirements.

Reference:

Usability & GOV.UK Design System requirement

Issue ID: DAC_Error_Links_Usability_01

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/milestones
Page title: 'Error: Update your capital schemes - Active Travel England - GOV.UK'
H1 heading: 'Change milestone dates'
Journey: 1.5a

Screenshot:

On the 'Change milestone dates' page, when there is an error with any of the multiple date components on this page, the links within the error summary are taking user focus to the containing div element around the date component rather than, as detailed in GOV.UK Design System: Error summary (Linking from the error summary to each answer) regarding answers with multiple fields, linking to the first field that is in error (or, where it is not known which field is in error, the first field of the group).

See also issue DAC_Error_Messages_Usability_01 regarding the error messages themselves.

Current code ref(s):

#main-content > div > div > div.govuk-error-summary > div > div > ul

<ul class="govuk-list govuk-error-summary__list">
   <li>
      <a href="#feasibility_design_completed_planned">
         Feasibility design completed planned date must be a real date
      </a>
   </li>
</ul>

#main-content > div > div > form > div:nth-child(3) > div:nth-child(1) > div

<div class="govuk-form-group govuk-form-group--error">
   <fieldset class="govuk-fieldset" role="group" aria-describedby="date-hint feasibility_design_completed_planned-error">
      <legend class="govuk-fieldset__legend">
         Planned date
      </legend>
      <p id="feasibility_design_completed_planned-error" class="govuk-error-message">
         <span class="govuk-visually-hidden">Error:</span> Feasibility design completed planned date must be a real date
      </p>
      <div class="govuk-date-input" id="feasibility_design_completed_planned">
         <div class="govuk-date-input__item">
            <div class="govuk-form-group">
               <label class="govuk-label govuk-date-input__label" for="feasibility_design_completed_planned-day">
                  Day
               </label>
               <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="feasibility_design_completed_planned-day" name="feasibility_design_completed_planned" type="text" value="30" inputmode="numeric">
            </div>
         </div>
         […]
      </div>
   </fieldset>
</div>

Screen reader comments:

“When I committed an error, the link connected to the error field did not take my focus to it. This is an issue as error handling protocol states that the corresponding element for an error input field should always take focus to the relevant area, so currently the non-responsive nature of the element is a serious issue.

Ensuring all error handling elements work as expected, taking the focus of the service user to the areas that need correcting on activation will resolve this issue.”

Examples of additional instances:

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/milestones
  Page title: 'Error: Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Change milestone dates'
  Journey: 1.5d

  Current code ref(s):

  #main-content > div > div > form > div:nth-child(3) > div:nth-child(1) > div > fieldset

  <fieldset class="govuk-fieldset" role="group" aria-describedby="date-hint feasibility_design_completed_planned-error">
     <legend class="govuk-fieldset__legend">
        Planned date
     </legend>
     <p id="feasibility_design_completed_planned-error" class="govuk-error-message">
        <span class="govuk-visually-hidden">
           Error:
        </span>
        Enter a feasibility design completed planned date
     </p>
     […]
  </fieldset>

Additional instances of this issue may exist on other pages throughout the website; wherever this issue occurs, they too will need to be resolved.

Solution:

As detailed by GOV.UK Design System: Error summary (Linking from the error summary to each answer), the links in the error summary should move the user focus to, in the case of an answer with a single field, the field that is in error. Where there are multiple fields, such as in the case of the date component, focus should be moved to the first field that is in error (or where it is unknown which field is in error, focus should be moved to the first field).