5.3 Task progress status not associated with the link (M)

5.3.1 WCAG 1.3.1 (A) - Desktop

On the Create a Part A Form page, sighted users are informed of their progress through statuses (‘To do’, ‘To review’, ‘Completed’) that are displayed adjacent to the task. This helps them to quickly identify what tasks they have completed and the further actions they need to take.

This information is not presented in the same manner to screen reader users. While they could access this information using their directional arrows, these details would be better presented if associated with the task link. Screen reader users often navigate pages through links and interactive elements; providing the status as part of the link would allow them to quickly understand the purpose and progress of the tasks.

FIGURE 5.5: Completed and To Do statuses highlighted on Create a Part A Form page

5.3.2 Code Snippet

<a class="moj-task-list__task-name">
    How has Duncann Cardours responded to probation so far?
</a>
<strong class="govuk-tag govuk-tag--lower govuk-tag--blue moj-task-list__task-completed">
    Completed
</strong>

5.3.3 Recommendation

Programmatically associate the status with the link.

This can be done using a visually hidden span within the <a> tag. Using aria-hidden="true" on the visually displayed text will ensure that the content isn’t repeated twice by screen readers. For example:

<a class="moj-task-list__task-name">
    How has Duncann Cardours responded to probation so far?
<span class="visually-hidden"> Status: Completed </span>
</a>
<strong aria-hidden="true">
     Completed
</strong>

Alternatively, aria-label could be used to provide this information. Note that aria-label overrides the visually displayed link text for screen readers.

<a aria-label="How has Duncann Cardours 
responded to probation so far? Status: Completed">
    How has Duncann Cardours responded to probation so far?
</a>

---