WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA to distinguish sections with same HTML tag

for

From: glen walker
Date: Jan 18, 2020 9:26AM

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.