Skip to content

Commit

Permalink
Merge pull request #1997 from alphagov/summary-list-guidance
Browse files Browse the repository at this point in the history
Improve summary list guidance
  • Loading branch information
36degrees authored Dec 13, 2021
2 parents 9f344fd + b4ff5ac commit 45193e5
Showing 1 changed file with 7 additions and 6 deletions.
13 changes: 7 additions & 6 deletions src/components/summary-list/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,25 @@ Do not use it for tabular data or a simple list of information or tasks, like a

There are 2 ways to use the summary list component. You can use HTML or, if you’re using [Nunjucks](https://mozilla.github.io/nunjucks/) or the [GOV.UK Prototype Kit](https://govuk-prototype-kit.herokuapp.com), you can use the Nunjucks macro.

### Summary list with actions
{{ example({group: "components", item: "summary-list", example: "without-actions", html: true, nunjucks: true, open: false}) }}

### Adding actions to each row

You can add actions to a summary list, like a ‘Change’ link to let users go back and edit their answer.

For sighted users, the actions get their context from the other content in the row they appear in.

Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.

To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like ‘Change name’ or ‘Change date of birth’.

{{ example({group: "components", item: "summary-list", example: "default", html: true, nunjucks: true, open: false, titleSuffix: "second"}) }}

### Summary list without actions

{{ example({group: "components", item: "summary-list", example: "without-actions", html: true, nunjucks: true, open: false}) }}
### Removing the borders

### Summary list without borders
The summary list includes some separating borders to help users read each row and its action.

If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `govuk-summary-list--no-border` class.
If your summary list does not have any actions, you can choose to remove the separating borders with the `govuk-summary-list--no-border` class.

{{ example({group: "components", item: "summary-list", example: "without-borders", html: true, nunjucks: true, open: false}) }}

Expand Down

0 comments on commit 45193e5

Please sign in to comment.