Headings provide a semantic and visual hierarchical structure to a document
Buttons, links, and form elements all have labels. Labels tell users what these elements are for. Headings are also labels, and describe sections of the document. A correct use of heading elements is especially important when supporting screen reader users because headings together create a table of contents, navigable by a variety of shortcuts and other means.
<h1> is the principle heading in the document, and labels the document itself. The following must be true for
- There is only one in the document
- Its content is unique to the current document
- It is the first semantic element inside the
<main>region of the document
- Its text relates to / is a subset of the page's
For a search results page, the
<title> should indicate that the page indeed contains search results, which term was used to search, and a reminder of the site in which the search took place.
<title>Search results for "Chuggingtion": CBeebies - BBC</title>
<h1>, accordingly, would be a subset which excludes the site information:
<h1>Search results for "Chuggington"</h1>
The heading level (h1—h6) for any other section of the page should be chosen in terms of belonging. That is, if the heading labels a child subsection of the page, then
<h2> is appropriate. If the heading labels a subsection of a subsection, then the level should be one higher than the parent.
- UK Politics (h1)
- Top stories (h2)
- Bid to get Labour to change Brexit stance (h3)
- Ban on electric shock collars for pets (h3)
- Top stories (h2)
As in the above example, sibling/equivalent sections should have the same heading level. In cases where one subsection is considered more important than another, it is not appropriate to change the heading level to elicit a larger heading for size (for example). This makes a nonsense of the document structure for screen reader users. Instead, use one of the following techniques:
- Promote the item so it appears first in the order (a 'sticky post' in blogging terms)
- Include the text 'featured' (or similar; 'breaking' for a breaking news story) as part of the heading or in close proximity to it
Whether or not subheadings are used explicitly with sectioning elements, they should be the first element that contains content within the section.
In this version, a screen reader user navigating by heading (for example, by using the H key with NVDA) would be skipped past the "Breaking" identifier and miss it.
<section> <h2>Top stories</h2> <section> <div class="alert">Breaking:</div> <h3>Bid to get Labour to change Brexit stance</h3> </section> </section>
In the adjusted version, "Breaking" is made part of the heading and will be read out along with it.
<section> <h2>Top stories</h2> <section> <h3> <span class="breaking">Breaking:</span> Bid to get Labour to change Brexit stance </h3> </section> </section>