DEV 1.1 – Use headings to convey the structure of your content
Why is this important?
Users rely on headings to interpret the structure of the page. Headings help with users understand the nature of content of a page by accurately describing its sections and subsections.
Some users rely on headings to navigate pages more easily. Without headings, some users (for example screen reader users) cannot easily browse the contents of the page or understand a document’s overall structure and layout. For example, by skipping to and reading just the headings or by listing all the headings to get an idea of the contents of the page.
A good heading structure with meaningful and representative headings helps users understand the nature of the page and its sections. Headings help to break up long sections of text into shorter, more manageable subsections, and they provide strong navigational cues, allowing users to navigate in a non-linear manner.
Descriptive headings that use correctly numbered heading levels allow screen reader users to navigate in a non-linear manner – they can jump straight to a section of content that interests them without having to read the rest of the page.
- Always have a single, main heading <h1> which describes the nature of the page – this will often be the same text as in the <title> attribute;
- For each main section use a level two heading <h2>;
- Any sub-sections should have a level three heading <h3>; further sub-sections should have a level four heading, and so on;
- Web pages support heading levels from one to six <h1> - <h6> and Word supports up to five heading levels, however some accessibility organisations advocate for restricting content depth to just four headings;
- Avoid skipping heading levels – do not jump from <h1> to <h4>.
- Always use the correct level heading.
- Ensure all headings are descriptive and concise.
- Never use headings for stylistic purposes. Use CSS to style headings if you want to change the font size (or colour, weight) rather than using an inappropriate level heading that happens to be the right size.
- If you want big text in the middle of your page, create a style with big text, do not use an <h1>
- Never use formatted text, such as large font size and bold weight, to give the appearance of a heading. This will not be communicated to assistive technology as a heading.
Examples of good practice
<h1>Develop accessible digital content</h1>
<h2>Provide an accessible page structure and layout</h2>
<h3>Use headings to convey the structure of your content</h3>
<h3>Code lists of items semantically</h3>
<h4>If something is a list, always code it as one</h4>
<h3>Do not misuse semantic markup</h3>
<h4>Use native HTML structural and semantic markup</h4>
<h4>Do not use headings or lists for decorative purposes</h4>
<h4>Do not use decorative elements to suggest lists or headings</h4>
<h4>Use the correct semantic markup for text</h4>
<h3>Provide meaningful links</h3>
<h4>Provide short and descriptive links</h4>
<h4>Provide supporting information in link text</h4>
<h4>Present lists of links as bullet-point or numbered lists</h4>
<h2> Design accessible navigation</h2>
<h3>Provide effective navigation based on recognised conventions</h3>
<h4>Make sure users can navigate your website by keyboard alone</h4>
<h4>Be consistent with navigation across each page of your site</h4>
<h4>Code navigation menus as lists</h4>
<h4>Provide a way for users to get to the homepage on every page</h4>
Examples of bad practice
- WCAG Failure F43: Using structural markup in a way that does not represent relationships in the content
- Web Accessibility 101: Web Headings for Screen Readers
- Checking Headings - W3C Digital Accessibility Foundations
- Why headings and landmarks are so important - A11ycasts #18
EN 301 549 v 2.1.2
- 220.127.116.11 Info and Relationships
- 18.104.22.168 Headings and Labels