WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA to distinguish sections with same HTML tag

for

From: Birkir R. Gunnarsson
Date: Jan 18, 2020 8:04AM

Colleen

No, it doesn't really matter.
Use aria-labelledby when you have a visible title, that way you map
the visible title as the accessible name of the element.
If the title is visually hidden it makes less of a difference.
It is still preferable in that by providing a visually hidden heading
and using that heading as the accessible name of the region you
facilitate people who navigate by landmarks as well as those who
navigate by headings (and there are surprisingly few people who take
advantage of landmarks sadly).


On 1/18/20, Colleen Gratzer < <EMAIL REMOVED> > wrote:
> I wanted to confirm that aria-labelledby or aria-label can be used
> interchangeably and ask, if in the following situation, one would be
> better than the other.
>
> Say I have a main nav and then a nav for blog pagination on a web page.
> The code might be like this:
>
> <nav aria-label="Main"> for the main/site navigation and <nav
> aria-label="Blog"> for the blog pagination.
>
> But I could also have for the blog:
>
> <nav aria-labelledby="blog-heading">
> <h2 class="screen-reader-text" id="blog-heading">Blog Navigation</h2>
>
> (and then a list.)
> Does it matter?
>
> Thanks!
>
> Colleen Gratzer
> Certified Branding Expert + Accessibility Specialist, Gratzer Graphics LLC
> https://gratzergraphics.com
> Design Mentor and Host of the Design Domination podcast
> http://creative-boost.com
> > > > >


--
Work hard. Have fun. Make history.