Incorrect Usage of Headings


This page depicts violations of Success Criteria: 1.3.1 Info and Relationships and 2.4.6 Headings and Labels

Back to 11 Point Checklist

Jump to incorrect usage of headings

Manually Formatting Headings

The Drupal content editor offers a way to manually format text to be bold.

Why Is This a Violation?

The text above is not set as a heading using approved styles. It is manually formatted with bold attribute. 

Manually formatting heading text does not offer a programmatic equivalent to the non-sighted person using a screen reader. This denies them the ability to programmatically scan the content in a way similar to a sighted person who can rely on size, spatial relationships, color, positioning, case, and punctuation to determine what text is a heading and what text relates to that heading. 

How Do I Fix It?

Only use the heading styles provided in the CSS of the Drupal template.

Breaking Heading Hierarchy

When you are selecting styles for headings, it is important to maintain an outline level hierarchy. Breaks in hierarchy can be confusing for the non-sighted community that relies on the programmatic markup of content for navigation and understanding. 

The next two headings are h5 values which appear after an h3. 

Why is This a Violation?

Technically, this is not a violation of the WCAG, but it is in violation of valid HTML per the World Wide Web Consortium. 

How Do I Fix It?

Always group headings like a table of contents and never skip a heading level (i.e., h2 to h4).