- Use headings to break up content and improve readability
- Headings should be accurate and informative
- Headings should convey a clear and accurate structural outline of the content of a webpage
- Headings should not skip hierarchical levels.
- Do not use headings for visual emphasis; headings should relate to the context that follows
Why to use headings?
Structuring content with headings makes it much easier to understand. Consider these two examples provided by gov.uk:
When properly used headings can help your users quickly scan your content to gauge whether or not it's useful, or to find the useful piece of content on a page. For sighted users this hierarchy is usually indicated visually by different sizing and styling of the text, and gives us an overview of what is covered in the text.
Most screen readers will announce the Headings on the page when they arrive on the page, to give the user an overview of the content. Users of a screen reader can summon a list of those Headings and navigate directly to the section we are interested in. It's important, therefore, to make sure the Headings give enough meaning to be useful when taken out of context.
How to use headings?
In HTML we have 6 levels of headings <h1> to <h6> . Heading level 1 <h1> is considered the most important, and often used to indicate the page title.
If you are using a text editor, you usually have access to a drop down of heading levels. If you highlight the content and then select a heading level to apply it to the selected text.
Use (at least) one H1 per page
There are different opinions about whether there should be more than one H1 on the page, now that Google has announced that it will not penalise people who do use more than one. A survey carried out by WebAim showed, however, that users of assistive technologies much preferred one H1 per page, which included the page title
It is clear is that there should be at least one H1 on every page in order to announce to the world (search engines included) what this page is about. In most circumstances the Page Title should be the H1.
Do not skip Heading levels
To accurately reflect the relationships between each section of content, headings should be nested, and shouldn’t skip levels. An H1 should not be followed by an H3.
For example, the A11Y Project’s homepage has 43 headings, all nested appropriately
- H1: The A11Y Project
- H2: Categories
- H2: Myths
- H3: Myth: People who use screen readers don’t use Javascript
- H3: Accessibility is ‘blind people'
- H2: Quick Tests
- H3: Quick Test: Resize text
- etc etc
Headings shouldn’t be used for stylistic purposes either. You should pick the appropriate heading, not the one you think looks the best. Talk to your friendly web development agency if you'd like to change the styling of your headings.
Equally, don't use bold text in the place of a heading. A person navigating by screen reader won’t have access to a “heading” that you’ve styled by just increasing the font size and making bold.