Headings

Maintain Consistent Heading Structure

Maintain consistent heading structure throughout the website or application. Predictable heading structure (size, color, alignment, etc.) helps all users including those with cognitive disabilities or those using screen readers to easily locate content.

Every Page Should Have a First Level Heading <h1>

This is a fundamental principle. The <h1> tag is typically used for the main heading or title of the page, providing a clear indication of the content's purpose.

Webpages Should Contain Only One First Level Heading <h1>

Ensuring that each page has a single main heading helps maintain a clear hierarchy and prevents confusion for both users and assistive technologies.

Headings Must Be Used in Order; No Skipping Hierarchical Levels

Following the correct order of heading levels (e.g., <h1>, <h2>, <h3>) ensures a logical and structured presentation of content. Skipping levels can disrupt this hierarchy and potentially confuse users relying on assistive technologies..

Every Heading Must Have the Correct Semantic Markup Regardless of Visual Appearance

The semantic markup (<h1>, <h2>, <h3>, etc.) conveys the structure and importance of content to both browsers and assistive technologies. It's essential to use these tags accurately, regardless of the visual styling applied.

Do Not Use Heading Levels for Visual Purposes

Semantic markup should reflect the structural hierarchy of content, and visual styles should be applied separately. Using heading tags purely for visual effects can lead to semantic confusion and accessibility issues.

When text serves the role of a heading, either visually or structurally, it should be marked up using appropriate heading tags (<h1>, <h2>, etc.). This ensures that the document structure is semantically meaningful, making it accessible to both users and assistive technologies.

Headings Must Be Accurate and Informative Describing Content and Should Convey a Clear and Accurate Structural Outline

Each heading should be concise and relatively brief (best practice) and accurately represent the content of the section it introduces, aiding users in quickly grasping the main topics and structure of the page. Headings play a crucial role in outlining the structure of a page. Clear and informative headings help users navigate and understand the content more easily.

Size of Headings

While there isn't a strict limit, it is best to keep headings concise and under 80 characters. Long headings can be difficult to navigate, especially for users of screen readers, which read the entire text.

Avoid in Headings

Avoid Using bold, italics, or underlining to denote a heading: Screen readers won't recognize these as headings.

Avoid all caps: Text in all caps is harder to read, especially for people with dyslexia. Instead, use title case or sentence case.

Avoid using font size to indicate a heading: Don't use font size to indicate a heading, instead use the heading structure. 

Avoid using entire sentences as a heading: It's best to keep headings short and concise with just a phrase as long headings might be less helpful.

Don't use a full stop: Avoid using a full stop at the end of a heading.

Using headings as other elements: Don't use headings as subheadings, subtitles, alternative titles, taglines, or slogans, or to emphasize a portion of text.

Standards and Best Practices