Headings not Properly Nested

Short Description

Headings skip levels or are used for purposes other than what they are intended for

Long Description

  • Heading markup is intended to indicate areas such as the start of main content, sections within the main content, blocks of navigation sections, and separate blocks of information.
  • Heading levels should not skip when going down, i.e. <h1>, <h3>, <h4>, but it is okay if they do going back up, i.e. <h4>, <h2>. Heading levels should appear as they would in an outline.
  • Headings are an important means of navigation for someone using a screen reader. Short cut keys allow a user to jump quickly from heading to heading, or to navigate through the headings according to heading level. This allows a user to bypass blocks of navigation, quickly find main content, and skim through the content.
  • Properly nested headings also help a screen reader user make sense of the content. It indicates which information is most important and which block is a subset of another block. It helps to communicate the relationship between different pieces of material, which helps people understand it better. Visual indicators such as color, size, and orientation can help communicate that information to the sighted, but a screen reader user does not have access to that information.
  • Headings also provide a hierarchical structure for content, with more important information having a higher heading level than the subsections below it.
  • Headings should not be used to format font. Using headings to format font means the heading levels cannot be relied upon to provide hierarchical information. In addition, headings are likely to not be where they should and to be where they should not.

Example of Issue

Recommendations

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile