Use h1-h6 instead of heading-like styles Accessibility Checkpoint

Description

Use HTML headings instead of applying CSS heading styles to non-headings.

Help

Screen reader users rely on headings to navigate within pages. Either add role=heading with aria-level or use h1-h6 elements to identify the element as a heading to screen readers.

How it works

This rule finds div, span and p elements that are:

• styled like headings (bold and on a separate line)
• with no role attribute
• and not part of a semantic element
• and does not contain a heading
• and not a lead paragraph
• and followed by some lines of text

Applicable standards

• WCAG 2.0 F2 (Success Criteria: 1.3.1 level A)
• WCAG 2.1 F2 (Success Criteria: 1.3.1 level A)
• WCAG 2.2 F2 (Success Criteria: 1.3.1 level A)
• Section 508 (2017) F2 (Success Criteria: 1.3.1 level A)

Note: Section 508 Refresh (2017) checkpoints are equivalent to WCAG 2.0 level A and level AA checkpoints.

Change history

• 6.53 Jul 2024 Fixed false positive on lead paragraphs.
• 6.52 Apr 2024 Fixed false positive.
• 6.51 Dec 2023 Improved detection.
• 6.41 Jul 2021 Improved detection.
• 5.37 May 2020 Improved detection.
• 5.36 Jan 2020 Fixed false positive.
• 5.5 May 2014 Fixed false positive.
• 5.0 Oct 2012 Don’t fire on elements with heading-like CSS styles enclosing a heading element.
• 3.0 Dec 2008 Added.

This page describes a web site issue detected in HTML documents by SortSite Desktop and OnDemand Suite.

Rule ID: AccWcag2-F2-1