Use landmark elements

Main, navigation, and aside elements of HTML5 act as landmarks, allowing screen readers and assistive technologies to jump to them..

Your site can be dramatically improved if you use landmark elements to make navigation easier for assistive technology users.

Why it is important

Having all content split into high-level sections on a web page makes navigation much easier for screen reader users.

There may be a lack of clarity regarding the purpose of content outside of these sections.

The use of both HTML5 elements and ARIA landmarks in one element is considered a best practice, but future browsers will favor HTML regions.

How the audit fails

Sitefig uses the Lighthouse tool, which ensures that all content on a page is contained within a landmark region.

Fixing the problem

A navigation point should lead to the page's primary content.

If iframe elements are presented on a page, each should contain either no or just one main landmark.

Using HTML5 and ARIA landmarks is a best practice to ensure all content is contained in a navigational region.

In HTML5, you can use elements like header, nav, main, and footer.

Their ARIA counterparts are role="banner", role="navigation", role="main", and role="contentinfo"