WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA to distinguish sections with same HTML tag

for

From: Colleen Gratzer
Date: Jan 18, 2020 8:28AM

Thanks so much, Birkir! Your "when to use" case is very helpful.

Colleen


On 1/18/20 10:04 AM, Birkir R. Gunnarsson wrote:
> 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
>> >> >> >> >>
>
>