More accessible today than yesterday

a11y space
  • Home
  • Join
Back to Lighthouse errors

Heading elements are not in a sequentially-descending order

Headings in order

HTML has 6 levels of headings, H1 to H6. Those heading are significant. By looking at a page, we can see the relative importance of information. If you can’t see the page, and use a screen reader, the importance is announced as “Heading 1” or “Heading 2”. Screen readers can also announce a list of all the headings on a page. Headings give people a sense of what the whole page is about.

It’s important to use Webflow Headings as headings and not as decoration. And they need to be in order. 47% of my sample of Webflow websites had this error. In other words, designers were using <H> as decoration, with no meaning.

Don’t use headings for things that aren’t headings - Menus, footers, blog post authors, dates.

Each page should be about just 1 topic. My recommendation is to use 1 H1 Heading. After that you can use 2 H2 headings, 3 H3s and so on. Unless you are writing some very detailed information, you’ll probably never use an H6. 

‍

Headings in logical order

If it’s a home page or landing page, you’ve got one main idea - that’s your H1.

Heading styles

I usually use Type Scale to create my heading visual hierarchy. In the image above, H1 are bigger than H2 which are bigger than H3. Type Scale lets you find a beautiful sequence.

On this site I used the Minor Third scale for desktop and Major Second scale for mobile viewports.

How you style the Headings is not the same as how you name them programmatically. Especially on home pages or landing pages, you can make your H2 or H3 headings in whatever style you want.

‍

‍


Google Lighthouse says

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings. By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

Technical Log

Webflow development 

Workflow

Lighthouse weighting

3

WCAG Guidance

H42: Using h1-h6 to identify headings
G141: Organizing a page using headings
G115: Using semantic elements to mark up structure
G117: Using text to convey information that is conveyed by variations in presentation of text
No items found.
No items found.
Bot readable page structure
Perceivable
1.3.1 a
Info and Relationships - Semantic structure
A
Bot readable page structure
Perceivable
1.3.1 b
Info and Relationships - NOT Sematic structure
A
Comment on this page
Close
Thank you for your comment
Oops! Something went wrong while submitting the form.
  • About
(C) 2020 a11y.space