Summary list

[amyhupe]

Use this issue to discuss the summary list component.

[joelanman]

@barry-moj in v13, Frontend is a plugin, you can update it in Manage Prototype > Plugins. In v12, you have to update the version in package.json

[barry-moj]

Cheers Joe!

[CharlotteDowns]

We ran an external accessibility audit for some of the components and patterns in GOV.UK Frontend in May 2023. In that audit, we included an example of the Summary list (card) component. We’re adding results from that audit here so that we can:

• document, discuss and address the findings
• inform future contributors of the findings

Two accessibility issues raised

Issue 1: WCAG A

Delete work history' isn't specifying for which card it applies

The ‘Delete work history’ links for each section, rely on surrounding content to understand their context and which work they will be deleting. As the link is not marked up in the same list item, table cell, or using different methods of aria, the link requires a user to move their focus to understand which work history they will be deleting.

More detail in this issue:

• #3673

Issue 2: WCAG A

'Change [row heading]' link doesn't give full context for the summary card it applies to

The ‘change’ links have been provided with additional link text to inform users of screen reading assistive technologies that they relate to the different questions i.e., ‘job title’. However, additional context is required to understand their whole purpose as to which section and work they relate to. For example, a user would need to navigate backwards to locate the heading to which they are sectioned under, and as there are multiple ‘change job title’ links, this can be confusing for users.

More detail in this issue:

• #3674

[jrbarnes9]

Hi. As I understand it, this new statement on WCAG 2.2 guidelines should be an 'OR' statement, rather than 'AND'. For example: "...are at least 24px by 24px in size, or have adequate spacing"

Because in this case, the action links in the component examples have a height of 23px so they are not "at least 24px by 24px in size".

...but they do meet the WCAG 'spacing' exception:

if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

[shabana-ali]

Hello,

With the addition of multiple action links, I have noticed that on a two-thirds column layout, the links stack when the viewport width is 1280 CSS pixels wide and the page is zoomed to 150%. The WCAG 2.2 success criterion 2.5.8 Target Size (minimum) is met.

Would you consider revising the 20% width set for govuk-summary-list__actions:

.govuk-summary-list__actions {
    width: 20%;
    text-align: right;
}

Obviously this is dependant on the text length of the links. The HMRC Add to a list pattern handles this although they only have 2 description values.