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

Cover image for Importance Of Landmarks
Julia πŸ‘©πŸ»β€πŸ’»
Julia πŸ‘©πŸ»β€πŸ’»

Posted on

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.

Oldest 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 πŸ‘©πŸ»β€πŸ’»

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 πŸ‘©πŸ»β€πŸ’»

Sure, the ones are just examples ☺️

50 CLI Tools You Can't Live Without

The top 50 must-have CLI tools, including some scripts to help you automate the installation and updating of these tools on various systems/distros.