Headings – Accessibility Guidelines

When laying out a page, headings provide a semantic way to lay out sections of content. A heading element briefly describes the topic of the section it introduces. Heading elements are used by users of AT to navigate a page quickly and to understand the structure of a page. Also see Landmarks.

When using heading elements, reserve the <h1> element for the page title. On the home page, this is usually the title of the site and on other pages, this may be the page title. Use the <h1> element once per page—some assistive technology may be unable to read multiple <h1>s on a single page correctly. Other heading levels may be used more than once following document outline order.

Note: <section> and <article> elements may allow you to reset the heading order allowing you to “restart” heading levels at <h1> according to the HTML5 spec. At this point, we are unaware of any browsers that support this feature beyond general HTML5 conformance checkers. For this reason, we recommend developers maintain the document outline with h1-h6 when using HTML5 outline elements.

For sub sections, use <h2> to <h6> in document outline order. <h1> is the most important and <h6> is the least. Avoid skipping headings. Avoid breaking document outline order (you may go from <h1> to <h3>, but never <h3> to <h1>).

For logos that are text-based, use <em> element.

If your logo is an image and acting as the main heading of the page, add an <h1> element for its text and use a sr-only rule so it’s visibly hidden but accessible to screen reader users.

Testing #

1. Identify visual ‘heading’ elements
2. Check that all visual ‘heading’ elements use an <h> tag
3. Verify that all sub heading elements have a higher number