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)
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.
Sure, the ones are just examples ☺️
Thanks!
Yes, you are right!
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: