Explain like I'm 5: (ARIA) Landmarks

Josefine Schfr - May 17 '23 - - Dev Community

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 🙌

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .