Semantic Heading Text
Serious - WCAG Level AA
What the issue is:
The accessibility issue arises when headings are not used semantically, which can happen if headings are split across multiple elements or if they contain meaningless text. For instance, using multiple <h2> tags to style a single heading or including decorative text within a heading can confuse screen readers and disrupt the logical flow of content.
Why it matters:
Properly structured headings are crucial for users who rely on assistive technologies, such as screen readers. These users navigate content based on the heading structure, and if headings are improperly defined or split, it can lead to a disjointed experience. Users may struggle to understand the hierarchy of information, making it difficult to locate relevant content.
How to fix it:
Use a single heading element for each section. Ensure that the content of the heading is meaningful and descriptive.
Avoid splitting headings across multiple elements. If you need to style a heading, do so with CSS rather than using multiple heading tags.
Remove any decorative or filler text from headings. Keep headings concise and relevant to the content they introduce.
Ensure a logical heading hierarchy (e.g.,
<h1>for the main title, followed by<h2>for section titles, and<h3>for subsections).
Best practices:
Use headings to summarize the content that follows them, making it easier for users to scan and understand the structure of the page.
Regularly review your heading structure for clarity and consistency, especially after content updates.
Common mistakes:
Using multiple heading tags to create visual styles instead of relying on CSS.
Including non-informative text like "Welcome to" or "This is" in headings, which adds no value to the content and can mislead users.