P As Heading
Critical - WCAG Level A
Using <p> elements styled with bold, italic, or increased font-size properties to convey heading semantics is a common accessibility violation. This practice undermines the document structure that assistive technologies rely on to navigate and interpret content. Headings should be marked up with appropriate heading elements <h1>, <h2>, etc.) to establish a clear hierarchy and improve the overall accessibility of the content.
For users with disabilities, particularly those using screen readers, the correct use of heading elements is crucial. Screen readers announce headings differently than regular text, allowing users to quickly navigate through sections of a document. If headings are not semantically correct, users may struggle to understand the structure of the content, leading to confusion and a poor user experience.
How to fix this issue:
Identify the content that is currently styled as a heading using
<p>elements with bold, italic, or larger font sizes.Replace the
<p>tags with the appropriate heading tags<h1>,<h2>, etc.) based on the content hierarchy. For example, if the text is a main section title, use<h1>, for subsections, use<h2>, and so on.Remove any unnecessary styling that was used to create the heading effect, as the semantic HTML will now convey the correct meaning.
Best practices:
Always use heading elements in a logical order. Start with
<h1>for the main title, followed by<h2>for major sections, and so on. This creates a clear content hierarchy.Avoid skipping heading levels (e.g., going from
<h1>to<h3>directly) as it can confuse users navigating with assistive technologies.Use CSS for visual styling without compromising semantic structure. For example, you can still style headings with CSS to make them visually appealing without changing their semantic meaning.
Common mistakes:
Using
<p>tags styled with CSS to look like headings instead of using the correct heading tags.Skipping heading levels, which can confuse users who rely on headings for navigation.
Overusing heading tags for non-heading content, which can dilute their significance and confuse assistive technology users.