DEV Community

Cover image for Importance Of Landmarks

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.

Top comments (4)

francoisaudic profile image

You have forgotten the legacy role="search" for search engine on websites.
There is also the role="region" which is a landmark role, with semantic importance, it's used in some patterns.

yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Sure, the ones are just examples ☺️

yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Yes, you are right!

josefine profile image
Josefine Schfr

Love this summary, thanks a lot @yuridevat πŸ™
Really concise and straight to the point, resolving a lot of confusion I had around landmarks!

I think I spotted a typo in the best practises section:

Make sure that all text is within g a landmark