Headings

Jooa11y's heading structure ruleset has the following conditions:

There must only be one <h1> on a page.
Headings must not skip levels.
Headings must not be empty.
Headings must not exceed 160 characters.
Blockquotes must not be used as headings.

Headings must not skip levels

Headings should be structured in a way that conveys hierarchy. This condition is based on WCAG 2.1 Technique H42: Using h1-h6 to identify headings.

Example #1 - This heading skips a level.

This error is also visually reflected in the "Show Outline" feature.

Headings must not be empty

This error sometimes happens in content management systems or WYSIWYG editors. For example when a content author accidently presses the Enter key twice or sometimes intentionally for more spacing.

Headings that are too long

If a heading is greater than 160 characters it will be flagged as an error. This condition was created to prevent content authors from using headings for visual aesthetics instead of good hierarchy.

Note: This condition is not a WCAG 2.1 criterion. The 160 character limit is arbitrary.

Example #1: Integer ut quam ut nibh tristique bibendum eget sit amet ex. Sed elementum mauris neque, vitae consectetur tellus pellentesque vel. Pellentesque consequat orci.

Blockquotes used as headings

This error might be common in content management systems where there are templated components. Sometimes content authors may use a component for visual aesthetics. For example, a stylized blockquote in place of a semantic header.

Note: This condition is not a WCAG 2.1 criterion. The 25 character limit is arbitrary.

Example #1

If a blockquote is less than 25 characters it will be flagged as an warning.

About the team

Donec metus urna, pharetra vel ipsum id, egestas ultrices sapien. Nullam viverra vitae turpis quis consequat. Fusce porttitor urna in ipsum ornare pulvinar. Donec sed sagittis ex. Vivamus vel eros ac augue tempor faucibus sit amet in lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tincidunt metus sem, ac sagittis diam semper sit amet. Vestibulum porttitor vel velit ut finibus. Praesent mauris enim, faucibus ut interdum sed, feugiat in metus.

Example #2

A blockquote greater than 25 characters will not be flagged as an error.

"To be, or not to be, that is the question."

Empty heading contains a decorative image

This will show up in the Page Outline as an error/empty

The alt text for this image will show up in the Page Outline.

Bolded text used as headings

Algorithm 1

Bolded text as heading. We're looking for paragraph tags that look like this: Some text

About us

Paragraph that only contains strong elements. If the text length is less than 25, flag as warning. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

This shouldn't be flagged since it's long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

Algorithm 2

Bolded text as heading with line breaks. We're looking for paragraph tags that start with strong tag, and have a line break either before the closing strong tag or after. It will only flag paragraphs that have more than 300 characters.

Example 1

Fake heading Followed by some text.

About us
Will not be flagged because it's a small paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh.

This won't be flagged either since this bolded text is long and not necessarily a heading. It could just be a big block of bolded text. It is over 120 characters.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

This will be flagged!
Because it's a pretty substantial paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elit duis tristique sollicitudin nibh. Etiam erat velit scelerisque in dictum non consectetur. Augue lacus viverra vitae congue eu consequat. Egestas maecenas pharetra convallis posuere morbi leo urna.

Example 2