Text appears and functions like a section heading but is not marked up as such.
- Rule ID:
- User Impact:
Text that acts as a heading visually or structurally SHOULD be designated as a true heading in the markup.
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.
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>
<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>
- Use <h1> to <h6> elements to mark text as a heading.
Don't do this:
- Rely only on visual styling to identify a heading.