Document list links look like headings

[jon-kirwan]

What:

The auditor has suggested that links in the document list appear like headings because they are bigger and bold and are heading some content. Therefore they should also be headings in the code.

Example URLs:

• https://www.gov.uk/contact
• https://www.gov.uk/corporate-information
• https://www.gov.uk/search/all

Another one that was flagged up but shows where it definitely doesn't make any sense to "fix" is https://www.gov.uk/government/collections/brexit-guidance.

But sometimes they are more clearly heading things, other times they aren't. They’re not always heading something useful (like just a date on the Brexit guidance) and would be bad as headings in that case. Although inconsistency would be worse, if some were headings and others weren’t.

This needs some investigation and might not need any fixing.

Anika's advice would be to probably NOT make them headings, or at the very least think very hard about it first.

Why:

Many screen reader users are used to navigating via headings. Having headings here might make it slightly easier to navigate and understand the content but too many headings are not good for accessibility either. Too little or too much structure makes a page harder to navigate. It's about getting the right balance.

Prioritisation score: 3

Reach: 3, Severity: 2, Effort: 2

[andysellick]

Maybe there could be an option on the component to make them headings (of a given level) only in certain circumstances, if needed.

[jon-kirwan]

Maybe there could be an option on the component to make them headings (of a given level) only in certain circumstances, if needed.

Perhaps we should provide the option (heading_level) and only render headings where related content has been added with the description option for all items? e.g.

<%= render "govuk_publishing_components/components/document_list", {
  heading_level: 2,
  heading_size: 'm',
  items: [
    {
      link: {
        text: "Become an apprentice",
        path: "/become-an-apprentice",
        description: "Becoming an apprentice - what to expect, apprenticeship levels, pay and training, making an application, complaining about an apprenticeship."
      }
    },
    {
      link: {
        text: "Become a journeyman",
        path: "/become-a-journeyman",
        description: "Becoming a journeyman - what to expect, what to take, pay and training, making an application, complaining about being a journeyman."
      }
    }
  ]
} %>

<% if item[:link][:description] && heading_level.present? %>
  // render heading etc
<% end %>

And so could be configured on pages like https://www.gov.uk/contact but would leave the component unchanged on pages where we only include document metadata https://www.gov.uk/government/collections/brexit-guidance.