List structure: summary lists (WCAG 2.2 Level A - Accessibility)

[daniellecorke]

Background

The eQ service identified this issue within the ONS Design System following their DAC audit report (18/01/2024).

Issue

List structure not properly represented to screen reader users within the markup.

The summary list of answers is marked up in a way which does not convey its structure properly to screen reader users. Although this appears as a single list to sighted users, it is represented as three separate definition lists to blind users, who may find it difficult to interpret the information as a result. This issue occurs because each row within the summary list is marked up within its own <dl> element.

Screen reader user comments

When viewing the details that could be changed in the ‘Calculated distance on foot and driving’ section I became aware that each item was in its own list rather than all being in one list, given they all related to the same content.
This made the information time consuming to navigate as I had to navigate past the list markup for each separate piece of content. Making all the content into one list will ensure a much more logical user experience.

Suggested solution

Ensure that list structure is properly represented to screen reader users so that the information can be understood in the same way as by sighted users. In this case, we recommend merging the three definition lists into a single list with three items.
This can be achieved by grouping each question within a div element appearing as the direct descendent of the dl element, to allow for further styling as per Summary list – GOV.UK Design System.

Tasks

• Investigate whether the change can be made and any impacts
• Decide the best solution
• Implement the solution
• Update eQ with progress

Info

• eQ DAC reports/docs
• Issue ID: DAC_List_Structure_01
• DAC report pages: 14 to 19
• WCAG Reference: 1.3.1 Info and Relationships (Level A):
  • Understanding Info and Relationships
  • How to Meet Info and Relationships

[precious-onyenaucheya-ons]

Based on DAC suggestion, The updated structure now involves a single <dl> element wrapping the entire summary list. Each summary item is enclosed within a <div> element, which, in turn, contains the appropriate <dt> and <dd> elements.
Here's the modified code:

<dl class="ons-summary__items"> 
  <div class="ons-summary__item"> 
    <div class="ons-summary__row ons-summary__row--has-values"> 
      <dt class="ons-summary__item-title"> <!-- ... Content ... --> </dt> 
      <dd class="ons-summary__values"> <!-- ... Content ... --> </dd> 
      <dd class="ons-summary__actions"> <!-- ... Content ... --> </dd> 
    </div>
  </div> 
  <!-- Repeat the structure for other summary items --> 
</dl> 

Despite these changes aligning with suggestions to improve screen reader interpretation, we have encountered issues with the axe library's accessibility tests.

Reached out to DAC asking about the implementation and this was their reply:
"The AXE tool is picking up an error due to the 2 <div> elements inside the <dl> but these tools sometimes pick things up to highlight areas that need manual testing i.e. to check that the content shouldn’t actually be part of the list.
We would suggest following the format in the GOV.UK Design System, however this wont cause an issue."

So we decided to leave the above implementation and the remove the axe tests from the summary list