Suggestion: apply aria-describedby to all tasks in task list, not just links

[edwardhorsford]

govuk-frontend/packages/govuk-frontend/src/govuk/components/task-list/template.njk

Lines 10 to 20 in 520f234

	<div class="govuk-task-list__name-and-hint">
	{% if item.href %}
	<a class="govuk-link govuk-task-list__link {%- if item.title.classes %} {{ item.title.classes }}{% endif %}" href="{{ item.href }}" aria-describedby="{{ hintId + " " if item.hint }}{{ statusId }}">
	{{ item.title.html | safe | trim | indent(8) if item.title.html else item.title.text }}
	</a>
	{% else %}
	<div {%- if item.title.classes %} class="{{ item.title.classes }}"{% endif %}>
	{{ item.title.html | safe | trim | indent(8) if item.title.html else item.title.text }}
	</div>
	{% endif %}
	{% if item.hint %}

In the current task list implementation, tasks that are links have aria-describedby linking the hint and the status. Tasks that do not have links do not get the same treatment.

The result of this is that (depending on screen reader), the different tasks sound different and are not consistent. I think it would be better for consistency if non-link tasks also linked the status.

I discussed this on the Cross-Gov Slack, and it seems it shouldn't hurt to implement this change. It may improve consistency, and while not all screen readers may read out the aria-describedby, if they do not, it is no worse than the current implementation.

Example without aria-describedby (current):

RPReplay_Final1718120160.mov

Example with aria-describedby:

RPReplay_Final1718120587.mov

---

Potential solution

Testing in VoiceOver on iOS, moving the existing aria-describedby="{{ hintId + " " if item.hint }}{{ statusId }}" to the parent div seems to work well. But if we wanted to keep it on the anchor itself, we could add a second copy of it to the non-link div for text.

[joelanman]

I don't understand the user need here. This would only be read out when users use a virtual cursor (for example in voiceover), in which case they get repetition of the tag - once on the task name and once on the tag.

This already happens on the links, but I understand the trade off there that its helpful to read out the tags when tabbing. This introduces repetition where there wasn't any.

[edwardhorsford]

@joelanman the benefit here is to make all the tasks consistent. Once you learn how to use the task list, you learn that with each task you get 'description: completed' or similar. However for ones you cannot start you don't get the same treatment, so I think it's less clear that it's a task.

Yes it's more repetitive, but it's no more repetitive than the other tasks already here. I think the benefit of them all being consistent is worth it.

[joelanman]

if you use the virtual cursor you will get the tag statuses anyway, I don't think there's value in make it consistently worse