WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA to distinguish sections with same HTML tag

for

From: Colleen Gratzer
Date: Jan 19, 2020 2:34PM

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