Text is inappropriately marked as a heading. Marking it as one using an H1-H6 tag misrepresents structure and info relationships.

Link to Text is inappropriately marked as a heading. Marking it as one using an H1-H6 tag misrepresents structure and info relationships. copied to clipboard

Rule ID:: semantic-heading-misused
User Impact:: Serious
WCAG :: 1.3.1.e

Rule

Text that does not act as a heading visually or structurally SHOULD NOT be marked as a heading.

Background

People who can see are able to quickly scan a page for headings and subheadings to understand the content and structure of a page. People who are blind do not have this ability if heading text is not marked in a way that screen readers can understand. Heading text and hierarchy must be identified semantically with heading markup. When heading markup is correctly applied, screen readers are able to: communicate that text is a heading and its level, provide a heading outline to users, and allow users to navigate directly from heading to heading.

Headings are about logical structure, not visual effects. Because screen reader users rely on semantic headings to learn the structure of the page, it is important to not use heading markup to create big, bold text for non-heading text. Fix this issue by: removing the heading markup; replacing it with appropriate semantic markup, such as a <p> element; and using CSS styles to achieve the visual effect instead.

Code Examples

Good Example:

Text styled using CSS:

<p class="promotional-item">Special rates good until July 31!</p>

The CSS:

.promotional-item {
  font-weight: bold;
  font-size: 200%;
  color: MEDIUMBLUE;
}

Failure Example:

Non-heading content marked as heading (promotional text marked as <h1> for styling):

<h1 class="promotional-item">Special rates good until July 31!</h1>

How To Fix

To fix this problem, do the following:

Remove the inappropriate heading markup.
Replace the heading markup with an appropriate semantic markup such as a <p> element.
Style the text using CSS.

Don't do this:

Use heading markup (<h1>, <h2>, etc.) when the text does not actually act as a heading.