Contents list
The contents list provides a list of links when content is long and needs to be broken up to help users navigate it.
When to use this component
This component is commonly used to list a page’s contents with links pointing to headings within the document, but can also be used for a list of links to other pages.
Contents lists help users:
- navigate complex documents that span multiple pages
- get to a relevant section in a long piece of content
- make sense of what’s in a piece of content.
How it works
The contents list has options for dashes or numbering. It supports nesting contents one level deep, currently only used by specialist documents. When nesting the top level list items display in bold.
It depends on the content type it shows on, but usually this component is rendered based on a publisher-provided list of parts in a document.
View this component and all its variations in the Component Guide (open in a new tab).
| Date | Description | Document | Format |
|---|---|---|---|
| May 2024 | A research and design project on travel advice identified that the contents list contributes to users struggling to find information they need. In the given context, working with users enabled the team to streamline the content list from 10 items down to 5. This resulted in less confusion, fewer places to look, and Emergency content info more easily found. |
Travel Advice research and design summary 2022 to 23 (pp. 8) (opens in a new tab) | Google Slides |
| November 2022 | A research project in context of a new page level design explored “How are users who need to advise on a thing orientating themselves and navigating at a content page level?”. Under “Chapter scanning and hopping” it summarises that “Participants displayed a strong inclination to engage with table-of-contents style links, which allow them to move across different sections within a piece of content.” The research was done on users that advise others on building works. |
Navigational behaviours – Chapter scanning and hopping – GOV.UK Explore – Research Round 5 (opens in a new tab) | Google Slides |
| August 2022 | The content audit discovery summarised a list of inconsistencies and issues with this component and offers proposed solutions to achieve more consistency across GOV.UK. |
Content Audit Discovery – Component recommendations (opens in a new tab) | Google Doc |
Accessibility criteria
The component must be a landmark with a navigation role.
The contents list must:
- inform the user how many items are in the list
- convey the content structure
- indicate the current page when contents span different pages, and not link to itself
- include an aria-label to contextualise the list
- ensure dashes before each list item are hidden from screen readers
Links with formatted numbers must separate the number and text with a space for correct screen reader pronunciation. This changes pronunciation from “1 dot Item” to “1 Item”.
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
Considerations and criteria taken from the Component Guide (open in a new tab).
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue's link.
- Give yourself a high-five.
Help improve this component
To help make sure that this page is useful, relevant and up to date, instructions on how to contribute can be found on the GitHub repository (opens in a new tab).