E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Colleen Gratzer
Date: Sat, Jan 18 2020 7:11AM
Subject: ARIA to distinguish sections with same HTML tag
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Sat, Jan 18 2020 8:04AM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | Next message →

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 ADDRESS 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.

From: Colleen Gratzer
Date: Sat, Jan 18 2020 8:28AM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | Next message →

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 ADDRESS 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
>> >> >> >> >>
>
>

From: glen walker
Date: Sat, Jan 18 2020 9:26AM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | Next message →

From a computer science perspective, using an indirect reference
(aria-labelledby) is better than a literal reference (aria-label),
especially for maintenance reasons.

If I had a literal string that I used several times in my program, while I
could have that string repeated every time, if I decide to change the value
of that string, I would have to change every occurrence in the code.

Instead, I would declare one variable with the value of that string then
use that variable throughout my code. If I decide to change the value of
that string, I change it once in the variable and don't have to touch the
rest of the code.

So my preference is to use aria-labelledby (like a variable, indirect
reference) whenever possible, but it's only useful if the literal string is
referred to more than once on the page. So if there's a heading or a
paragraph or a span that contains the string and I want to use that string
to label a landmark or add more context to a link, I will always use
aria-labelledby. Then later, if someone decides to change the heading,
paragraph, or span, the landmark or link that refers to it will
automatically be updated.

If the string only appears once, then I would use aria-label.

So in your two examples, the first I would use aria-label because "Blog"
doesn't appear anywhere else on the page but the second I would use
aria-labelledby (rather than repeating "Blog Navigation" in an
aria-label). Exactly as you have it coded.

From: Colleen Gratzer
Date: Sun, Jan 19 2020 12:20PM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | Next message →

Good to know, Glen. Thank you!

Colleen


On 1/18/20 11:26 AM, glen walker wrote:
>>From a computer science perspective, using an indirect reference
> (aria-labelledby) is better than a literal reference (aria-label),
> especially for maintenance reasons.
>
> If I had a literal string that I used several times in my program, while I
> could have that string repeated every time, if I decide to change the value
> of that string, I would have to change every occurrence in the code.
>
> Instead, I would declare one variable with the value of that string then
> use that variable throughout my code. If I decide to change the value of
> that string, I change it once in the variable and don't have to touch the
> rest of the code.
>
> So my preference is to use aria-labelledby (like a variable, indirect
> reference) whenever possible, but it's only useful if the literal string is
> referred to more than once on the page. So if there's a heading or a
> paragraph or a span that contains the string and I want to use that string
> to label a landmark or add more context to a link, I will always use
> aria-labelledby. Then later, if someone decides to change the heading,
> paragraph, or span, the landmark or link that refers to it will
> automatically be updated.
>
> If the string only appears once, then I would use aria-label.
>
> So in your two examples, the first I would use aria-label because "Blog"
> doesn't appear anywhere else on the page but the second I would use
> aria-labelledby (rather than repeating "Blog Navigation" in an
> aria-label). Exactly as you have it coded.
> > > > >

From: Graham Armfield
Date: Sun, Jan 19 2020 12:31PM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | Next message →

Another use case that favours aria-labelledby is if your content is ever
likely to be presented in an alternate language.

When content is translated it is sadly common for ARIA and alt attributes
to get missed.

Regards
Graham Armfield
Coolfields Consulting

On Sat, 18 Jan 2020, 16:26 glen walker, < = EMAIL ADDRESS REMOVED = > wrote:

> From a computer science perspective, using an indirect reference
> (aria-labelledby) is better than a literal reference (aria-label),
> especially for maintenance reasons.
>
> If I had a literal string that I used several times in my program, while I
> could have that string repeated every time, if I decide to change the value
> of that string, I would have to change every occurrence in the code.
>
> Instead, I would declare one variable with the value of that string then
> use that variable throughout my code. If I decide to change the value of
> that string, I change it once in the variable and don't have to touch the
> rest of the code.
>
> So my preference is to use aria-labelledby (like a variable, indirect
> reference) whenever possible, but it's only useful if the literal string is
> referred to more than once on the page. So if there's a heading or a
> paragraph or a span that contains the string and I want to use that string
> to label a landmark or add more context to a link, I will always use
> aria-labelledby. Then later, if someone decides to change the heading,
> paragraph, or span, the landmark or link that refers to it will
> automatically be updated.
>
> If the string only appears once, then I would use aria-label.
>
> So in your two examples, the first I would use aria-label because "Blog"
> doesn't appear anywhere else on the page but the second I would use
> aria-labelledby (rather than repeating "Blog Navigation" in an
> aria-label). Exactly as you have it coded.
> > > > >

From: Colleen Gratzer
Date: Sun, Jan 19 2020 2:34PM
Subject: Re: ARIA to distinguish sections with same HTML tag
← Previous message | No next message

Great to know, Graham. Thank you!


On 1/19/20 2:31 PM, Graham Armfield wrote:
> Another use case that favours aria-labelledby is if your content is ever
> likely to be presented in an alternate language.
>
> When content is translated it is sadly common for ARIA and alt attributes
> to get missed.
>
> Regards
> Graham Armfield
> Coolfields Consulting
>
> On Sat, 18 Jan 2020, 16:26 glen walker, < = EMAIL ADDRESS REMOVED = > wrote:
>
>> From a computer science perspective, using an indirect reference
>> (aria-labelledby) is better than a literal reference (aria-label),
>> especially for maintenance reasons.
>>
>> If I had a literal string that I used several times in my program, while I
>> could have that string repeated every time, if I decide to change the value
>> of that string, I would have to change every occurrence in the code.
>>
>> Instead, I would declare one variable with the value of that string then
>> use that variable throughout my code. If I decide to change the value of
>> that string, I change it once in the variable and don't have to touch the
>> rest of the code.
>>
>> So my preference is to use aria-labelledby (like a variable, indirect
>> reference) whenever possible, but it's only useful if the literal string is
>> referred to more than once on the page. So if there's a heading or a
>> paragraph or a span that contains the string and I want to use that string
>> to label a landmark or add more context to a link, I will always use
>> aria-labelledby. Then later, if someone decides to change the heading,
>> paragraph, or span, the landmark or link that refers to it will
>> automatically be updated.
>>
>> If the string only appears once, then I would use aria-label.
>>
>> So in your two examples, the first I would use aria-label because "Blog"
>> doesn't appear anywhere else on the page but the second I would use
>> aria-labelledby (rather than repeating "Blog Navigation" in an
>> aria-label). Exactly as you have it coded.
>> >> >> >> >>
> > > > >