WebAIM - Web Accessibility In Mind

E-mail List Archives

The importance of landmarks to screen readers?

for

From: Christine Hogenkamp
Date: Mar 23, 2021 2:07PM


Hello,

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?


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

CONTEXT CREATIVE
317 ADELAIDE ST. W., #500 | TORONTO, ON CANADA | M5V 1P9
<https://maps.google.com/?q17+ADELAIDE+ST.+W.,+%23500%C2%A0+%7C%C2%A0+TORONTO,+ON+CANADA%C2%A0+%7C%C2%A0+M5V+1P9&entry=gmail&source=g>