WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Landmarks structures

for

From: Steve Green
Date: Apr 21, 2020 6:06AM

1.3.1 basically says that if you can visually perceive a relationship between components, then that relationship must also be conveyed programmatically. In most cases when you look at a website you can clearly see the page header and footer, which are common to all pages. Those groupings must be conveyed programmatically. Everything in between them would usually be the main content, so that should be in a main landmark. I would therefore say that the absence of landmarks is a failure of 1.3.1.

The HTML5 specification states how many of each landmark you can have and how they can be nested. You can only have one main landmark that is visible, although you can have others that are hidden. You can have as many headers and footers as you want.

It's fine to nest landmarks as long as you do so in accordance with the HTML5 specification. You can have navigation and search landmarks inside pretty much any other landmark, but you can't put the main landmark inside anything else. As far as I can tell, you can even have one navigation landmark inside another.

There are obviously a vast number of permutations, so you can't learn them all - you need to understand the principles. I couldn't find them all gathered in one place, so it looks like you need to look at the specification for each one separately.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Murphy, Sean
Sent: 21 April 2020 11:01
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [WebAIM] Landmarks structures

All,

I have been doing some research for landmarks and want to get some clarification.

1. If no landmarks are present, is this technically a 1.3.1 failure? If so, what technique / failure does this relate to? As I could not identify one.
2. I have seen multiple posts and even Axe refers to only having one header (banner), content-info (footer), main, aside, etc on a page. Is this documented anywhere? As I read in a W3C tutorial stating you could have multiple banners for example in one of their tutorials. An example blog: https://keithjgrant.com/posts/2018/03/html5-sectioning-and-landmark-elements/
3. Is it bad practise to have nested regions? I can understand the practise of only having one header, footer, main, etc on a page.


Base upon the W3C page https://www.w3.org/TR/html53/sections.html Using an aria-label will <H#> is suggested to be used instead of aria-label because this will change it to a region. This is not clearly spelled out in the W3C document.Other blogs do mention this. Extract from this document about labelling a section:

"Assistive Technology may convey the semantics of the section<https://www.w3.org/TR/html53/sections.html#elementdef-section> to users when the element has an explicit label. This information can provide a hint to users as to the type of content. For example the role of the element, which in this case is "region", can be announced by screen reader software when a user navigates to an section<https://www.w3.org/TR/html53/sections.html#elementdef-section> element. User Agents may also provide methods to navigate to section<https://www.w3.org/TR/html53/sections.html#elementdef-section> elements.".

The W3C above document does not mention you cannot nest Nav's, is this correct or not?

I wish to understand the nesting rules for regions.

Sean document

Sean Murphy | Digital System specialist (Accessibility) Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917