WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Landmarks structures

for

From: Birkir R. Gunnarsson
Date: Apr 21, 2020 8:45AM

I think the region landmark (role="region" and the <section> element)
only turn into landmarks when you provide an accessible name (using
aria-label or aria-labelledby), same probably applies to <article> and
the article role, though I admit I am too lazy to check (well, too
busy to be honest).
I try to require that header/main/footer be identified as landmarks
when they are clearly identified visually on the page.
I recommend regions when a section of content is not followed by a
header, e.g. content that is displayed/hidden in an accordion. Often
the content after the accordion does not start with a heading and
without a region with an aria-label you cannot easily tell where the
expanded content ends and the next block of content begins, not unless
you collapse the content and then check.
The main advantage of landmarks is that their boundries (start and
end) are announced, a heading only marks the start of a section of
content, not the end of it.
If you have multiple landmarks of the same type, like multiple nav or
region landmrks, you should supply an accessible name for each so
users can easily tell them apart.
I recommend navigation landmarks for navigation menus.
Imagine a website header with a set of accordions, e.g.
<button aria-expanded="true">Mortgage solutions</button>
<nav aria-label="mortgage solutions">
list of mortgage solutions links goes here
</nav>

In our usability testing we found that, out of over 10 screen reader
users, not a single one used a landmark and basically no users knew
what a landmark was. I find this shocking and bit sad, shows lack of
training or documentation of what could be a very useful feature.


On 4/21/20, Jonathan Avila < <EMAIL REMOVED> > wrote:
>> 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.
>
> At this point there is not a documented WCAG blanket failure for lack of
> landmarks as some people have argued that use of headings within a document
> does communicate and create distinction for the sections of pages that can
> provide equivalents (e.g. h1 for the start of main content). Text can also
> be used to meet criterion 1.3.1. So any determination would likely need to
> take into account the text that is used along with other structures like
> headings to determine if visual backgrounds, etc. have equivalents. Keep in
> mind that some pages have no visual distinction between headers and footers
> and main content.
>
> Jonathan
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Steve
> Green
> Sent: Tuesday, April 21, 2020 8:07 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Landmarks structures
>
> CAUTION: This email originated from outside of the organization. Do not
> click links or open attachments unless you recognize the sender and know the
> content is safe.
>
>
> 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
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.