I'm very confused about (ARIA) landmarks and the terminology used around them. Would really appreciate an explanation 🙏
Here is what I know
- We should provide landmarks as context for screen readers, to provide page structure and organise our content
- This can be done by using semantic HTML, e.g.
<main>for most important content,<h1>-<h6>for headline hierarchies,<a>for links etc.
I found this super useful article by @yuridevat about The Importance of Landmarks explaining how ARIA roles should only be used when improving legacy code or if it's not possible to provide enough context through HTML elements.
Here is where I'm confused:
I guess my biggest issue is the wording: this article refers to ARIA Landmark Examples and lists banner, main, complementary and contentinfo as landmarks. But if I inspect the code, these roles do not show up.
Are the ARIA roles just different names for the native HTML elements (e.g. complementary= <aside>)?
When talking about "ARIA landmark roles" do we actually also mean semantic HTML elements?
Is there a good example of (ARIA) landmark roles in practise?
Thanks a lot in advance 🙌
Top comments (1)
You are right with the different naming. The link you have shared do has a side navigation to each of these landmarks where it is shown that, as you guessed, aside would be the html tag and the aria role would be complementary.
I am not sure if i can answer your question about aria landmark roles in general, but for me it would be the same, since it is best to use semantic html. But this is only my opinion and how I would mean it when talking about it.