Issue #16 - landmarks

                October 17, 2021

            Issue #16 - landmarks

Posts like this one take quite some time to prepare, but it's absolutely worth the effort because I learned a few things and I'm sure that you'll learn something, too. 

Have a great weekend,

Manuel

View this issue in the browser.
HTMHell Newsletter Issue #16 - landmarks

  HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.

<body>
  <!-- banner landmark -->
  <header>
    <!-- navigation landmark -->
    <nav>
    </nav>
  </header>
  <!-- main landmark -->
  <main>
    <!-- search landmark -->
    <form role="search">
    </form>
  </main>
  <!-- contentinfo landmark -->
  <footer>
  </footer>
</body>

Benefits

Landmarks help screen reader users with orientation on the page.
Screen reader users may jump from landmark to landmark using keyboard shortcuts.
Screen reader users may list all landmarks on a page and select them.
Sighted users may add a browser extension to jump to landmarks by using keyboard shortcuts.

Landmarks

    Landmarks in HTML

        Element
        ARIA role
        Conditions

        header
        banner
        Only in context of the body element, not when it's a descendant of <article>, <aside>, <main>, <nav>, or <section>.

        nav
        navigation

        main
        main

        section
        region
        When it has an accessible name using aria-labelledby, aria-label or title

        form
        form
        when it has an accessible name using aria-labelledby, aria-label or title

        form
        search
        with role="search"

        aside
        complementary

        footer
        contentinfo
        Only in context of the body element, not when it's a descendant of <article>, <aside>, <main>, <nav>, or <section>.

Tips

  Here are some tips for using landmarks:

    If there are multiple navigation landmarks on a page, each should have a unique label (aria-label or aria-labelledby).

<body>
  <header>
    <nav aria-label="Primary"></nav>
  </header>
  <footer>
    <nav aria-label="Secondary"></nav>
  </footer>
</body>

    Landmarks listed in VoiceOver on macOS without labels

Landmarks listed in VoiceOver on macOS with labels

Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".
If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.
Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.
There should be only one banner landmark.
There should be only one contentinfo landmark.
A document must not have more than one <main> element that does not have the hidden attribute specified. Having more than one visible <main> element can confuse users because screen readers don’t announce the number of main elements.
If there are multiple complementary landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
If there are multiple form landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <header></header> is sufficient, you don't need <header role="banner"></header>.

    Most landmarks are well supported, but support may vary, especially with form landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a sound document outline.

Resources

4.4.14 The main element
Use Only One main on a Page
Screen reader survey #9: landmarks
W3C ARIA Landmarks Example
Accessible Landmarks

Read this issue in your browser or share it with others: htmhell.dev/tips/landmarks/

Don't miss what's next. Subscribe to HTMHell Newsletter:

Element	ARIA role	Conditions
`header`	banner	Only in context of the body element, not when it's a descendant of `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`.
`nav`	navigation
`main`	main
`section`	region	When it has an accessible name using `aria-labelledby`, `aria-label` or `title`
`form`	form	when it has an accessible name using `aria-labelledby`, `aria-label` or `title`
`form`	search	with `role="search"`
`aside`	complementary
`footer`	contentinfo	Only in context of the body element, not when it's a descendant of `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`.