WebAIM’s web accessibility testing tool, WAVE, can alert you to a possible heading on your web page.
Explanation
From the WAVE documentation page:
Alerts
Possible heading
What It Means
Text appears to be a heading but is not a heading element.
Why It Matters
Heading elements (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users. If heading text is not a true heading, this information and functionality will not be available for that text.
How to Fix It
If the paragraph is a section heading, use a heading element instead (<h1>-<h6>).
The Algorithm… in English
A <p> element contains less than 50 characters and is either:
- 20 pixels or bigger
- 16 pixels or bigger and bold and/or italicized
Standards and Guidelines
- 1.3.1 Info and Relationships (Level A)
- 2.4.1 Bypass Blocks (Level A)
- 2.4.6 Headings and Labels (Level AA)
Real examples
WordPress theme: GeneratePress
GeneratePress places the site title inside the header with a fixed font size. You can find the following style inside the theme’s CSS file.
.main-title {
margin:0;
font-size:25px;
line-height:1.2em;
word-wrap:break-word;
font-weight:700;
text-transform:none
}To resolve WebAIM’s alert, all you have to do is change the font size.
Word of caution though, WebAIM uses a formula that will calculate the font size and trigger the alert if you declare a base font size in pixels, and use relative units.
Ie. Base font is 21 pixels, custom class is 1.2rem or 1.2em, it will still trigger unless you reduce the size to 0.8rem or 0.8em.