Headings are the backbone of your content structure and describe the content on a webpage. Good headings also make the site easier to scan. As a sighted user, we’re accustomed to seeing sections of content broken up using various font sizes that highlight groups of related content.
Visually, it only matters that these are set off in design. Using appropriate heading levels is the screen reader equivalent of good visual design: if headings are not present, then all the text is undifferentiated – if headings are used inappropriately, then content doesn’t make sense.
Rules of thumb for headings in theme development:
- One unique H1 per page, post or archive that describes the primary topic of the page. In most themes, this is the post -, page – or archive title.
- Use H2 through H6 to divide major sections of the page, such as widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas, comment sections, or other major segments of the page.
- Use headings in a logical and hierarchical structure.
Use HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. headings to meaningfully describe the content that follows, not as a design element. A heading means “this text describes the information that follows it.” There should not be text before the heading that is part of what that heading describes, and there must be content following the heading.
Note: If you use a headings validation tool, a warning may pop up when the first heading is not an H1. This only applies when your web page needs to comply with WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2 AAA (triple A). The global web standard is WCAG 2 AA (double A) and starting with an H2 (for e.g. the navigation) is allowed at the AA standard.
Testing Tools
- WAVE
- Headings map for Chrome
- a11yTools Extension for Safari macOS
- Tota11y
Heading semantics
- Semantic Structure on WebAIM
- The HTML5 Document Outline
- Heading Tags (H1, H2, H3, P) in HTML
- Computer says NO to HTML5 document outline
Heading structure best practices
- Web Accessibility Tutorials: Headings
- Web Accessibility Tutorials: Labeling Regions
- Web Page Mistakes: Heading Structure – Heading Tag
- Nomensa: How to structure headings for web accessibility
- Using headings to improve accessibility (Drupal). Note class=”element-invisible” is in WP class=”screen-reader-text”
- MRW web: H1 Headings Are Important
- MRW web: Common heading-mistakes