diff --git a/src/components/summary-list/index.md.njk b/src/components/summary-list/index.md.njk index 3c40274b05..fed17b4f44 100644 --- a/src/components/summary-list/index.md.njk +++ b/src/components/summary-list/index.md.njk @@ -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}) }}