Importance Of Landmarks

Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers.

This article is about the correct use of landmarks.

Landmarks allow screen reader users to navigate through sections of your website by skipping to content that interests them.

Landmarks could be seen as the logical layout of the website’s UI, which is divided into e.g. header, navigation, main content, and footer. So the usage makes sense in any case.

For all the above areas, since the introduction of HTML 5, there are default HTML tags that provide screen reader users with the necessary semantic information, <header>, <nav>, <main>, <footer>.

To support older browsers or to preserve legacy code, there are ARIA roles as an alternative, which can be added to the respective HTML element, role="banner",  role="navigation",  role="main"  and  role="contentinfo".

Best practices

• Used landmarks to designate pre-defined parts of the layout
• Use HTML 5 tags over ARIA roles when possible
• Make sure that all text is withing a landmark

Read more about the usage of ARIA landmarks in ARIA11: Using ARIA landmarks to identify regions of a page.