WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: The importance of landmarks to screen readers?


From: Peter Weil
Date: Mar 25, 2021 7:55AM

One thing I wonder about landmarks is nesting. It's not uncommon to see a <nav> element tucked inside <main>. Is this really a good idea? My impression is that landmarks ought to kept at the top level unless there is a compelling reason (which does not include css or layout constraints) to do so.

It's also common is to see the heading (e.g., <h1>) for <main> to be located outside of <main>. How important is it to keep these together under the same landmark?

Peter Weil
Web Developer
University Marketing
University of Wisconsin–Madison

On 3/23/21, 3:08 PM, "WebAIM-Forum" < <EMAIL REMOVED> > wrote:


My dev team and I are currently having a discussion about the importance of
landmarks in websites. I was under the impression that the guidance of WCAG
suggests that each webpage should have at least one or two landmarks per
page, to help give screenreader users the ability to understand the overall
layout of the page, for example that the page has at least the landmarks:

- a header (for overall site info such as website name)
- a nav (with links to different pages within the site or different
sections of the page if it's a page with a lot of different content such as
a long scroll type website)
- a main for the content of the page

We were working on a website that had a nav landmark that was by default
hidden as a landmark when the page loaded (in NVDA it was not showing as
anything under the Landmarks list in Elements List) and only became visible
as a landmark once a hamburger menu was opened.

I had flagged this as a WCAG failure, because the user has no way to know
the nav landmark is there until they open the nav by hamburger button (and
how can they open the nav when they don't know it's there? a sort of
catch-22 situation) and I had assumed that screenreader users would want
the nav landmark to be visible by default, either accessible by keyboard
shortcut or by the Landmarks list.

Have I given the nav landmark identity too much importance, that it must be
identified by the screenreader officially as a nav landmark by default when
the page loads? If the nav was clearly labelled for what it is (ie Main
menu) and clear instructions are given for opening the menu by the
hamburger icon, and otherwise is read out clearly by the screenreader and
navigable by keyboard, would that be considered sufficient for passing the
intent of WCAG's guidelines? Or do screen reader users first look at the
list of page landmarks to help them move quickly between different parts of
the page?

*Christine Hogenkamp (She, Her)*
Front-end Developer