Summary list example

With customised links

For all links shown in the component, visually hidden text containing the name of the thing it refers to is automatically appended. This offers a better experience for screen reader users by making the link text unique and more explicit. In the example below, the link text would be Change Title, summary and body.

The text of the link can be customised using the link_text option. Take care that the provided link_text still makes sense to screen readers when combined with the title. For instance, Reorder link text and Items title becomes Reorder Items, which reads fine, but link text of Summary would read as Summary Items, which does not make sense.

To override this behaviour, use link_text_no_enhance on the link in question, as shown. This will remove the visually hidden text, allowing you to add your own. The component will render a span element with a class of govuk-visually-hidden included in a passed capture block as the link_text parameter.

How it looks (preview)

Title, summary and body

Edit this document

• Title: Rural conservation techniques
• Title: Change
• Body: Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted.
• Body:
  • Edit
  • Remove

How to call this example

<%= render "govuk_publishing_components/components/summary_list", {
  title: "Title, summary and body",
  items: [
    {
      field: "Title",
      value: "Rural conservation techniques",
      edit: {
        href: "edit-title",
        text: "Edit",
        data_attributes: {
          gtm: "edit-title"
        }
      }
    },
    {
      field: "Body",
      value: "Following the land use committee change to overreaching rural byelaws in 2009, further policies were adopted.",
      edit: {
        href: "edit-body",
        link_text: "Edit"
      },
      delete: {
        href: "delete-body",
        link_text: "Remove",
        link_text_no_enhance: true
      }
    }
  ],
  edit: {
    href: "edit-title-summary-body",
    link_text: sanitize("Edit this document <span class=\"govuk-visually-hidden\">my hidden text for screenreaders</span>"),
    link_text_no_enhance: true
  }
} %>