There is an update to the GOV.UK Prototype kit which may affect how your prototype works if you are not using the latest version. Contact #team-plat-ui on HMRC Slack (open in app) if you need more information or support.

Page heading

This pattern is the main heading of the current page, which lets the user know what information is being asked for or provided.

When to use

Use a page heading on every page.

You can also include a section heading if it helps the user know where they are in a service. For example, in long services and those with more than one section.

How it works

Every page must have a main heading coded as an <h1>.

There are 2 ways to use the account header. You can use HTML or, if you are using Nunjucks or version 7 or later of the GOV.UK Prototype Kit, you can use the Nunjucks macro.

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro in to your code.
            <header class="hmrc-page-heading">
  <h1 class="govuk-heading-xl">What is your name?</h1>
</header>
          
              {% from "hmrc/components/page-heading/macro.njk"  import hmrcPageHeading %}

{{ hmrcPageHeading({
  text: "What is your name?"
}) }}
            

For accessibility reasons, if you use a section heading, it should be coded as a paragraph <p> inside a <header>.

            <header class="hmrc-page-heading">
  <h1 class="govuk-heading-xl">What is your name?</h1>
  <p class="govuk-caption-xl hmrc-caption-xl"><span class="govuk-visually-hidden">This section is </span>Personal details</p>
</header>
          
              {% from "hmrc/components/page-heading/macro.njk"  import hmrcPageHeading %}

{{ hmrcPageHeading({
  text: "What is your name?",
  section: "Personal details"
}) }}
            

This makes sure that when using screen readers and other assistive technologies, the page heading and the section heading are:

  • separate
  • in the correct source order
  • displayed the correct way
  • read out the correct way

Change or remove any visually hidden content to meet your users’ needs.

Research

The recommended code has been tested with screen reader users and all browsers, devices and assistive technologies. Research showed it:

  • displayed as expected
  • worked consistently across different assistive technologies
  • helped users know where they were in the service
  • did not distract users from their task

We need more research. If you have used the page heading and section heading, get in touch to share your research findings.

Discuss the page heading on GitHub