Adding accessible headings to your text in Dialogue

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 Dialogue 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 Dialogue

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. Your heading should be <h2> because the top heading tag <h1> is used for the challenge title. Any sub-headings that you wish to add below your initial heading should be <h3>, and so forth to follow what is known as the 'heading hierarchy':

• Challenge title at top of page = h1
• Any headings that you wish to add below that = h2
• Any sub-headings that you wish to add below those headings = h3
• etc

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.

More information

Read more about headings and accessibility at WebAIM - Semantic structure: Headings (opens in new tab).