Text appears and functions like a section heading but is not marked up as such.
- 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.