Content Designer

Making the content as easy to understand as possible makes it better for everybody. For example, simple content helps people whose first language is not English and people who have dyslexia.

If you publish on GOV.UK, follow guidance on designing accessible content on GOV.UK.

If you’re in a service team, you should also look at guidance on designing accessible services.

Things to consider as a Content Designer

Page title

Titles should describe the purpose and content of the page.

The title is usually the H1, apart from when the H1 contains identifiable information.

For example, if the H1 is “What is your date of birth?” then it would also be the title.

However, sometimes the H1 can contain personal information, for example “What is John Smith’s date of birth”. In this case, the title should be different to the H1 as there is a risk the information would be included in analytics data.

In cases like this, the title should be as close as possible to the H1 but not identical to it. For example, it could be “What is your partner’s date of birth?”.

You should work with a Frontend Developer and QA Tester to make sure the titles are correct when deciding if the page is finished.

Page URL

You can refer to the page URL guidance in the Service manual.

The page purpose should be clear from the URL. URLs are often overlooked as something that should be designed. But they’re an important part of accessibility as they can orientate users. They can also make content easier to find if a user needs to come back later.

An example of a good url is:

Code example
/guidance/help-with-your-tax-return

An example of a bad url is:

Code example
/user/5625665526/post/87837847.php

You should work with a Frontend Developer to make sure the URLs follow the most user-friendly format when the service is built.

Write in plain English

Your content should be clear and easily understood by anyone despite their education or background.

GOV.UK has guidance on writing and designing online content including writing in plain English which can be used as best practice for all content designers.

You can read more about why writing content for everyone in your audience is important.

Unique headings

Every page should have a unique heading. Do not have multiple pages with the same vague H1, for example: “Your details”.

Think about the journey as a whole. Consider the page that came before and the one that comes after.

For example, if all the pages in an online form have the same heading, an assistive technology user may not know which page they are on and if they have completed all of the form.

Alternative text for non-text content

If an image is purely decorative then you do not need to provide alternative text (also known as “alt text”), but if it adds context to the content or additional information, then it should have a description.

We recommend that GOV.UK publishers describe the image within the body text. Follow guidance on images to learn more about:

  • how to choose and describe images
  • use alt text
  • produce accessible graphs, diagrams and infographics
  • copyright standards for GOV.UK

If you are designing a service, you may still need to add alt text. Refer to the GOV.UK Design System’s guidance on images.

Captions and transcripts

If you have audio or video content, you need to make sure this it’s accessible to everyone.

GOV.UK has guidance on captions and transcripts which can be used as best practice for all content designers. Your video may also need an audio description. The Government Communication Service has guidance on using audio description.

Consistent content

The content should be consistent across the service. For example, if the button at the bottom of each page is labelled “Continue”, it should be labelled “Continue” on other pages and not something similar like “Next”.

Consistent does not always mean identical. For example if you have a link which says ‘Go to page 4’, then it’s acceptable to have ‘Go to page 5’ on the next page.

Add links to your content in context and make them accessible.

GOV.UK has guidance on best practice text link text which can be used as best practice for all content designers.

Error messages

WCAG 2.1 success criterion 3.3.3 Error Suggestion states that if a user does not input information correctly, you should help them with a suggestion or error message as long as it it does not jeopardize security.

For example, if a user does not fill in their name correctly, you should create an error message to help them, which reads: “Enter your name”.

If there are security considerations, you still need to provide an error message but it can be more vague. An example of this might be an email and password combination.

For example, if somebody was trying to gain access to somebody else’s account, by only telling them they got the password incorrect, you are also telling them that they actually got the email address correct. So for situations like this the error message might instead read: “Enter both your email and password correctly.”

You should work with a Frontend Developer and a QA Tester to work out what error messages you might need to write content for.

You can read more about error messages in the GOV.UK Design System.

Heading hierarchy

Always use the correct heading levels.

GOV.UK has guidance on heading levels which can be used as best practice for all content designers.

A heading can have any level from H1 to H6. Every page should have a single H1, and each heading level should relate to all the headings above it. The higher the number, the more detail on the topic you should be going into.

For example, you might have a page to provide COVID-19 information on. On that page you might have a section for information on how to protect yourself, and you might have another section getting tested.

Code example
<h1>Stop the spread of COVID-19</h1>

  <h2>How to stay safe</h2>
    <h3>Wearing a mask</h3>
    <h3>Washing your hands</h3>
    <h3>Social distancing</h3>

  <h2>How to get a test</h2>
    <h3>Getting tested if you're a key worker</h3>
    <h3>Getting a test for somebody in a care home</h3>

If content does not fit within the heading hierarchy on the page, consider moving it to another page where it makes more sense.

If you need to change the size of the heading, use a different class to style it rather than changing the heading level itself.

For example:

Code example
<h1 class="govuk-heading-s">This is a small H1</h1>
<h2 class="govuk-heading-l">This is a large H2</h2>