WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: The importance of landmarks to screen readers?

for

From: Birkir R. Gunnarsson
Date: Mar 24, 2021 5:47AM

I agree with Bart
My general approach as an accessibility lead (and my experience as a
screen reader user) is to recommend that you identify the header, main
content, and footer of a webpage using landmarks (either the proper
HTML elements or using the proper landmark roles), this is
particularly true if the 3 sections of the page are visually distinct
and if the header/footer are standard across multipple pages (whereas
the main content is unique to the page).
No accessible names are required.
I typically find that "less is more" when it comes to landmarks so I
recommend other landmark roles only in certain situations.

If you have a persistent collection of links with a common purpose or
an accordion that you can open and that remains open when you navigate
away from it, then I recommend the navigation landmark with an
accessible name.
e.g.
<nav aria-label="accounts">
<ul>
<li>link to account 1</li>
<li>Link to account 2</li>
..
</ul>
</nav>
or
<button aria-expanded="true" id="a1">Promotions</button>
<nav aria-labelledby="a1">
link 1
link 2
</nav>

One advantage of landmarks of headings is that you can see the
boundries of the landmarks with a screen reader (the beginning and the
end). Sometimes this is important if otherwise you wouldn't be sure
(e.g. if the section after the landmark region does not start with a
heading).
The guidance would be too detailed to put in an email (especially
before 8am and my first cup of coffee), but my general message is not
to overdo landmarks. They add verbosity and many people do not know
how to use them.
Mark the 3 sections of the page and use a landmark if you feel other
content is strongly related (strong enough that you can easily come up
with a name for it), especially if you think the boundries of that
content need to be made clear to the user.

On 3/24/21, Bart Simons < <EMAIL REMOVED> > wrote:
> > you should also specify an aria-label for the landmark.
>
> I would like to add some nuances to this statement.
> Taking the website http://www.keat.gr/index.php/en/ as an example.
>
> When using a role="search" there is really no need to label that section
> with the word search that you labelledby from a visually hidden heading:
> <section role="search" aria-labelledby="zf--search--section-heading">
> <h2 id="zf--search--section-heading" class="zf--section-heading
> visually-hidden">Search</h2>
>
> We also don't need a section labelled "footer" inside the <footer> element:
> <footer role="contentinfo">
> <section aria-labelledby="zf--footer-content--section-heading"
> <h2 id="zf--footer-content--section-heading"
> class="visually-hidden">Footer</h2>
>
> Further I'd limit the number of occurences of the same landmark on a
> page rather than trying to find descriptive labels. They clearly ran out
> of inspiration when they came up with
> "complementary content (lower)"
>
> It is not trivial to label a set of nav sections in a useful way. My
> plea is to limit the number of landmarks avoiding the necessity to label
> them.
>
> Regards
>
> Bart Simons
>
>
> Op 23/03/2021 om 21:32 schreef glen walker:
>
>> You often find scanning tools that flag a lack of landmarks as an error.
>> Or more frequently, they're marked as a "best practice" but many people
>> miss the "best practice" part and think *all* errors found by the tool are
>> required to be fixed.
>>
>> Nothing in WCAG requires landmarks directly. They can absolutely be
>> helpful for navigating the page (with assistive technology) and aiding in
>> 2.4.1 conformance. They can also be helpful in satisfying 1.3.1 since you
>> can often visually discern a "relationship" among elements that should be
>> programmatically conveyed. But it can be a bit subjective on whether
>> landmarks are really "required".
>>
>> But does it matter if they are technically needed or not? From a UX
>> perspective, they're super handy so go ahead and implement them. If
>> browsers would implement a native way to navigate by landmarks then more
>> users could benefit from them, especially keyboard users.
>>
>> And if you are going to implement them, lean towards using native semantic
>> html elements first before relying on ARIA roles. Use <header>, <footer>,
>> <main>, <nav>, <section>, <aside>, etc. And other than <header>,
>> <footer>,
>> or <main>, you should also specify an aria-label for the landmark.
>> >> >> >> >
>
> > > > >


--
Work hard. Have fun. Make history.