Hello! How can we help?

Search our knowledge base for loads of useful advice and answers to common questions

If you're still stuck you can always submit a support request and we'll get back to you ASAP

Adding accessible headings to your text

Natalie Williams -

Headings provide structure to your content. They help to break up the text, making it easier to scan and read. Headings can also be used to navigate a page by screen readers.

Using headings to divide up your content benefits individuals who:

  • Are blind or visually impaired
  • Use the keyboard to navigate
  • Are slower at reading or processing information
  • Have difficulty organising or prioritising content
  • Want to quickly read and process information

To make proper headings in Citizen Space that can be navigated by screen readers, it requires using the 'source code' button on the text editor. This is an advanced skill, but if you're feeling confident, read on for instructions on how to do it.

If you're not feeling confident editing the source code, adding headings using bold text still has benefits over not having any headings but bear in mind that they won't be fully accessible to all users.

How to add accessible headings to your content in Citizen Space

Add the text for your heading into the text window in the usual way. Then select the 'source code' button in the menu bar:

Source code button in toolbar highlighted

 

You should see something that looks a little like this:

The words This is my heading in the source code with paragraph tags either side

 

To make this a heading, we need to replace the paragraph tag (<p>) with a heading tag. To work out what the appropriate heading tag should be, we need to follow a standard heading hierarchy or structure:

  • On the Overview page, the first heading should be <h2> because the top heading tag (<h1>) is used for the consultation title. Any equivalent headings that follow on should also be <h2>, and any sub-headings should be <h3>.
  • On the survey pages, start with <h3> because h1 is for the consultation title and <h2> for the survey page titles. Any equivalent headings that follow on should also be <h3>, and any sub-headings should be <h4>.

You'll need to replace the closing tag as well for example, replace </p> at the end of the heading text with </h2>

The words This is my heading in the source code with h2 tags either side

Once you're done, you can de-select the 'source code' button to view your heading and text as usual. Then remember to select the blue 'Save' button at the bottom of the page to save your work.

 

More information

Read more about headings and accessibility at WebAIM - Semantic structure: Headings.