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:
You should see something that looks a little like this:
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>
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.
Read more about headings and accessibility at WebAIM - Semantic structure: Headings.