Accessibility Errors in Google Lighthouse

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

HTML5 landmark elements are used to improve navigation

Typically, a web page is divided up into areas. This can be done visually:

Four different sized boxes representing areas on a page

The problem is that these areas are all just div blocks. There is no meaning behind them. For that we need some semantic HTML. Semantic means "meaning". We need to think about the meaningful HTML of each area, and give it a name. Then, if you can't physically see these areas, your screen reader will announce them to you.

Let's look at ways to name the areas in Webflow to help all our users.

So let's say I have this layout:

The same boxes with Header, Nav, Main, Aside and Footer labels

You understand that the top area is for the company logo and navigation, the footer is for the company address and links to legal, privacy and accessibility policies. The area on the left is the main content of the page and the area on the right could be for additional content or links to related content. Each of these areas now has a semantic meaning and assistive technology can tell the user what part of the page they are on.

In Webflow you use the Element settings > Tag to define the page areas. These are very useful for assistive technology to announce where the user is on the page, and gives a good idea of whether this is what they are looking for.

Set Tag to define page areas

Note that in the Webflow Designer, this tag does NOT change the name of the Section on the page or in the Navigator. It only appears in the HTML of the published website.

Google Lighthouse says

HTML5 elements such as main, nav, and aside act as landmarks, or special regions on the page to which screen readers and other assistive technologies can jump. By using landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technology.