WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Same link label for different products

for

From: allyssa jessicon
Date: Dec 16, 2019 10:52PM

i am sorry, it is the same label is provided for multiple products

On 12/16/19, glen walker < <EMAIL REMOVED> > wrote:
> 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>
> > > > >