DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

Collapse
 
naomipham_ profile image
Naomi Pham • Edited on

Great summary! I'm also a huge fan of semantic tags. They really helps dividing big chunks of code. Even when using library with limited code like ReactJS, semantic names like Nav, MainBody, Footer, etc. are still used for components.

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

Thanks!
Yes, you are right!

Collapse
 
francoisaudic profile image
francoisaudic

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.

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

Sure, the ones are just examples ☺️

🌚 Life is too short to browse without dark mode