> 
Wiki
 / 
HTML5 landmark elements are used to improve navigation

Accessibility Errors in Google Lighthouse

Reset filters
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
<dl>s do not contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements
<frame> or <iframe> elements do not have a title
<html> element does not have a [lang] attribute
<html> element does not have a valid value for its [lang] attribute
<input type="image"> elements do not have [alt] text
<object> elements do not have [alt] text
<th> elements and elements with [role="columnheader"/"rowheader"] do not have data cells they describe
<video> elements do not contain a <track> element with [kind="captions"]
ARIA IDs are not all unique
Background and foreground colors do not have a sufficient contrast ratio
Buttons do not have an accessible name
Cells in a <table> element that use the [headers] attribute refer to an element id not found within the same table
Custom controls have ARIA roles
Custom controls have associated labels
Definition list items are not wrapped in <dl> elements
Document doesn't have a <title> element
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children
Form elements do not have associated labels
Form fields have multiple labels
HTML5 landmark elements are used to improve navigation
Heading elements are not in a sequentially-descending order
Image elements do not have [alt] attributes
Interactive controls are keyboard focusable
Interactive elements indicate their purpose and state
Links do not have a discernible name
List items (<li>) are not contained within <ul> or <ol> parent elements
Lists do not contain only <li> elements and script supporting elements (<script> and <template>)
Not all ARIA input fields have accessible names
Not all ARIA toggle fields have accessible names
Offscreen content is hidden from assistive technology
Presentational <table> elements do not avoid using <th>, <caption>, or the [summary] attribute
Some elements have a [tabindex] value greater than 0
The document uses <meta http-equiv="refresh">
The page does not contain a heading, skip link, or landmark region
The page has a logical tab order
The user's focus is directed to new content added to the page
User focus is not accidentally trapped in a region
Visual order on the page follows DOM order
[accesskey] values are not unique
[aria-*] attributes are not valid or misspelled
[aria-*] attributes do not have valid values
[aria-*] attributes do not match their roles
[aria-hidden="true"] elements contain focusable descendants
[aria-hidden="true"] is present on the document <body>
[id] attributes on active, focusable elements are not unique
[lang] attributes do not have a valid value
[role] values are not valid
[role]s are not contained by their required parent element
[role]s do not have all required [aria-*] attributes
[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is greater than 5

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.