To follow proper semantic heading usage for WCAG, you need to use headings to structure your content logically and hierarchically. This means using <h1> for the main title of the page, followed by <h2> for major sections, <h3> for subsections, and so on. Do not skip heading levels (e.g., jumping from <h2> to <h4>). Headings should describe the content that follows them and be used solely for structure, not for styling.
WCAG and Semantic Headings
The Web Content Accessibility Guidelines (WCAG) require that headings are used to provide a clear and logical outline of a webpage's content. This helps users of assistive technologies, such as screen readers, to navigate the page, understand its organization, and quickly jump to specific sections. Screen readers can announce the heading level and text, giving users an efficient way to scan the page's structure.
Best Practices for Heading Usage
- Logical Hierarchy: Use headings in a strict, descending order (<h1> through <h6>). Think of it like a table of contents for a book. The <h1> is the book title, <h2>s are chapter titles, and <h3>s are subheadings within those chapters.
- Purpose: Use headings only for their intended purpose: to create a content hierarchy. Avoid using them just to make text bold or larger. If you need to style text, use CSS.
- Unique <h1>: Every page should have one, and only one, <h1>. This heading should accurately describe the primary topic of the page.
- Descriptive Text: The text within each heading should be concise and clearly describe the content of the section that follows it.
- Do Not Skip Levels: This is a crucial point for WCAG compliance. Never skip a heading level. For example, don't follow an <h2> directly with an <h4>. If you need a subsection, the next heading should be an <h3>. Skipping levels can confuse screen reader users by implying that a section is missing.
Example of Proper Usage
<!DOCTYPE html>
<html lang="en">
<head>
<title>Proper Semantic Heading Usage</title>
</head>
<body>
<h1>The Importance of Accessibility</h1>
<p>This is an introductory paragraph about why web accessibility is so important for all users, including those with disabilities.</p>
<h2>What is WCAG?</h2>
<p>A section explaining the purpose and standards of the Web Content Accessibility Guidelines.</p>
<h3>Key Principles of WCAG</h3>
<p>A brief overview of the four core principles of WCAG: Perceivable, Operable, Understandable, and Robust.</p>
<h2>Semantic HTML Explained</h2>
<p>A section that goes into detail about the meaning and benefits of using semantic HTML elements.</p>
<h3>How to Use Semantic Tags</h3>
<p>Examples and best practices for using elements like `header`, `nav`, `main`, and `footer`.</p>
</body>
</html>In the example above, the headings follow a correct, descending hierarchy, providing a clear and accessible structure for the page content.