Title does not match h1

Pattern Checker

What does this mean?

This suggests there is a mismatch between the page's title and the h1. Ideally the first part of the page title should be the same as the h1 so the user is confident they are on the correct page.

For example:

<title>What are your contact details? - Service Name - GOV.UK</title>
...
<h1>What are your contact details?<?h1>

This could be down to a spelling error, or the h1 copy may have been updated at some point and the title is still showing the old copy, or it could be something more complex.

For example if the h1 contains personally identifiable information (PII) then it might be appropriate for the title to be a slightly different wording.

<title>What is their date of birth? - Service Name - GOV.UK</title>
...
<h1>What is John Smith's date of birth</h1>

This can be worked around by sending the de-personalised title to your analytics but still showing the detailed version in the title.

You might also be using the GOV.UK page caption pattern where the caption is contained within the h1.

<title>What are your contact details?</title>
...
<h1>
    <span>About you</span>
    What are your contact details?
</h1>

We'd normally recommend following the HMRC pattern where the caption is kept outside of the h1 for clarity. This is because section captions are often repeated on a series of pages and screen-reader users will not be able to skip the caption part to hear just the unique copy.

Impact on users

If the page title is very different from the h1 then it can cause confusion for users. This is particuarly true for screen-reader users as the page title is the first thing which is read out when the page loads. If the h1 does not at least match the theme of what has just been announced by the title then it can be disorientating.

How to fix

Check why the two do not match. Is it a simple spelling error or was the h1 updated during development and the title omitted from the change?

If the h1 contains personal information then check that the page title at least conveys the same meaning.

If your h1 includes a section title then look at moving the section title outside of the h1 to improve clarity.

References

HMRC page title pattern

Classification

Level: warn
Tagged: best-practice

See all issues