Axe error: <dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements

[malcolmhire]

As the title explains, when using the summary list component and using the action element within the Nunjucks component only on some of the summary rows we receive axe-core violations.

The example below shows the bottom row missing an action.

rows: [
  {
    key: { text: 'First name' },
    value: { text: 'Joe' },
    action: { 
      items: [
         {
            href: '/first-name',
            text: 'Change'
         }
      ]
    }
  }, {
    key: { text: 'Last name' },
    value: { text: 'Bloggs' },
    action: { 
      items: [
         {
            href: '/last-name',
            text: 'Change'
         }
      ]
    }
  }, {
    key: { text: 'Date of Birth' },
    value: { text: '06/01/1953' }
  }
];

We receive this axe-core error from the genarate HTML that relates to the bottom row that has no action:

<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements

.govuk-summary-list__row:nth-child(3) > .govuk-summary-list__actions

It looks like the problem lies in the empty <span class="govuk-summary-list__actions"> instead of <dd class="govuk-summary-list__actions">

[matthewmascord]

This has been raised by one of our service teams at HMRC, hmrc/play-frontend-govuk#60 - it's causing automated accessibility tests to fail.

[adamliptrot-oc]

This could possibly be fixed by using a pseudo-element on the parent row to stand-in for the missing dd and so maintain the rest of the layout (as just removing this will cause issues where only one of the items has no action element).

For example, adding a modifier class to the parent row:

.govuk-summary-list__row--noaction:after {
  content: "";
  width: 20%;
  display: table-cell;
  border-bottom: 1px solid #b1b4b6;
}

It becomes a bit more tricky where width modifier classes might also be sent down to the component however.

[philsherry]

This could also be fixed by using more appropriate markup.

Are we saying that a link with the word “Change” is an acceptable value for a dd here, or is it merely convenient to add it into this handy element?

The HTML <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).

Term	Description	Description
Business name	Claim7Business	(empty)
Registration reference number	SOME/REF-001	(empty)
Claim period	25 July to 28 July 2020	[A Change link]

Assuming we’re fine with that, then we also have to be fine with this error:

<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script> or <template> elements

So, if I’m reading this right, any teams using this pattern will need to address these issues in their accessibility statement because they’ll be failing on the following two points:

• 1.3.1 Info and Relationships (Level A)
  • F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content
• 4.1.1 Parsing (Level A)
  • Validating Web pages
  • Using HTML according to spec
  • Ensuring that Web pages are well-formed

[malcolmhire]

Do we know when this might be worked on? I'm probably going to have a go fixing this myself, initially as a custom macro in our project but can share my finding once I have a solution

[hannalaakso]

@malcolmhire We've now given this a high priority label so we hope to be able to pick it up soon. However it's not possible to give a time frame for this at the moment. Thanks a lot for your patience 🙏