Text appears and functions like a section heading but is not marked up as such.

Link to Text appears and functions like a section heading but is not marked up as such. copied to clipboard
Rule ID:
semantic-heading
User Impact:
Serious
WCAG:
1.3.1.e

Rule

Text that acts as a heading visually or structurally SHOULD be designated as a true heading in the markup.

Background

Headings are about logical structure, not visual effects. 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. Screen readers ignore the size and font-weight of the text, so blind users cannot know a phrase is a heading unless it is identified semantically with heading markup, using <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>. 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.

Code Examples

Good Example:

Semantic headings using <h1> and <h2>:

<h1>Types of Web Accessibility Laws</h1>
  <h2>Civil Rights Laws</h2>
  <h2>Procurement Laws</h2>
  <h2>Industry-Specific Laws</h2>

Failure Example:

<p> tag styled to look like a heading:

<div>
  <p style="font-weight: bold; font-size: 200%;">
    Setting the Exposure Manually on a Camera
  </p>
  <ol>
	 <li>Set the ISO</li>
	 <li>Choose an aperture</li>
   <li>Choose a shutter speed</li>
  </ol>
</div>

How To Fix

Do this:

  • Use <h1> to <h6> elements to mark text as a heading.

Don't do this:

  • Rely only on visual styling to identify a heading.

References