Accessibility Errors in Google Lighthouse

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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.

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. 

1. Go to Webflow Designer

2. Click on Publish

Click on Publish

3. See the "Issues to improve on this page" section and Click on it

See the "Issues to improve on this page" section and Click on it

4. Find Skipped heading level…

Find Skipped heading level…

5. Click on Show me how to fix arrow

Click on Show me how to fix arrow

6. Decide which way to make the changes needed

Decide which way to make the changes needed

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.