People who use assistive technology (AT) often use the list of the headings on the page go get a sense of the page’s content, the same way that other people may visually scan the page. For both users with and without AT, making the headings easily scannable and understandable is critical to ease of use.
Do
- Ensure the page or dialog begins with an
<h1>. (Best practice: the<h1>matches the page’s<title>element.) - Ensure the heading is unique and descriptive.
- Ensure the heading is concise for easier scanning.
- Ensure that headings convey a clear and accurate structural outline of the sections of content on the page.
Don’t
- Use generic headings such as “Section 1” or “a)”.
- Provide more than one
<h1>on the page. - Skip heading levels (examples: skipping the
<h1>, going from<h1>to<h4>).
Headings and iframes
Screen readers treat the contents of an iframe as if it part of the document that embeds it. That includes headings – if a document has 3 headings and an embedded iframe has 2 headings, the screen reader will announce that there are 5 headings.
If possible, ensure the embedded content aligns with the header information in the existing document. In other words, if an iframe is embedded as a child of an <h3>, the highest heading in the iframe would be an <h4>.