WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Same link label for different products

for

From: glen walker
Date: Dec 16, 2019 11:19AM

Not quite sure I'm following your situation. Sounds like you're talking
about two different things. The first is if a product has multiple labels
and the second is if the same label is used on multiple products. Are you
saying a product has multiples labels *and* those labels are repeated on
other products too? Sounds a bit confusing for everyone.

I think you might be talking about 2.4.4 Link Purpose (in context). This
often applies to links that say "read more" or "learn more" or "click
here", etc. If your link said "get 50% off" and you don't have any context
for that link, it could be a problem.

The Understanding section for 2.4.4 (
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html)
has examples of what "context" means. It says context "can be achieved by
putting the description of the link in the same sentence, paragraph, list
item, or table cell as the link, or in the table header cell for a link in
a data table". This usually allows the screen reader user to get the
context of the link using a screen reader shortcut key (such as read the
current sentence). However, that still requires some work by the user to
get the context. If you can provide the context automatically, that's a
better user experience.

For example, the following technically passes 2.4.4:

<p>For more information on health benefits, <a href='benefits.html'>click
here</a></p>

because the link is contained in the sentence that provides more context.
But if you bring up the list of links for the page, you'll just see "click
here".

I like to recommend 2.4.9 Link Purpose (Link Only) even though it's a AAA
success criteria. The above example, while compliant, would be better if
it said:

<p>See <a href="benefits.html">health benefits</a>, for more
information.</p>

Now the list of links will include "health benefits" instead of "click
here", which makes more sense out of context and doesn't require the user
to hunt for the context.

In your case, it sounds like you might have some context near your link
that would help the link make more sense. In that case, I recommend using
aria-labelledby to add that context to the link. For example, if you had
something like this:

<p>New iPhone 20<p>
<p>description of product...</p>
<a href='...'>get 50% off</a>

You can help the link by associating the product name with the link. Just
add an ID to the product name and the link then use aria-labelledby.

<p id="newID1">New iPhone 20<p>
<p>description of product...</p>
<a id="newID2" href='...' aria-labelledby="newID2 newID1">get 50% off</a>