WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Same link label for different products

for

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

From: allyssa jessicon
Date: Mon, Dec 16 2019 2:09AM
Subject: Same link label for different products
No previous message | Next message →

nHi all,
Let me come to the matter straight, take a scenario where there two
or more same label in a page provided for the same element –
For instance: in a shopping page, above most of the products picture
there is an offer like ‘Get 50% off for the device', is it okay to
have more than one label with the same name for different products?
What if the label and or link opens a same modal window for different
products?

From: Srinivasu Chakravarthula
Date: Mon, Dec 16 2019 2:27AM
Subject: Re: Same link label for different products
← Previous message | Next message →

I think it needs to have association with product name; else users would
not know which product does have the offer.
Regards,

Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
Website: http://www.srinivasu.org | http://serveominclusion.com

Let's create an inclusive web!

Senior Accessibility Program Manager, Watermark


On Mon, Dec 16, 2019 at 2:39 PM allyssa jessicon < = EMAIL ADDRESS REMOVED = >
wrote:

> nHi all,
> Let me come to the matter straight, take a scenario where there two
> or more same label in a page provided for the same element –
> For instance: in a shopping page, above most of the products picture
> there is an offer like ‘Get 50% off for the device', is it okay to
> have more than one label with the same name for different products?
> What if the label and or link opens a same modal window for different
> products?
> > > > >

From: glen walker
Date: Mon, Dec 16 2019 11:19AM
Subject: Re: Same link label for different products
← Previous message | Next message →

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>

From: allyssa jessicon
Date: Mon, Dec 16 2019 10:52PM
Subject: Re: Same link label for different products
← Previous message | Next message →

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

On 12/16/19, glen walker < = EMAIL ADDRESS 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>
> > > > >

From: Maxability A11Y
Date: Wed, Dec 18 2019 6:00AM
Subject: Re: Same link label for different products
← Previous message | No next message

If the target of the link is same, in this case opens the same modal, I
believe having same label to links is fine. Associating the label of link
with the product label is an advantage.
Is it a violation as per WCAG? I don't so as 2.4.4 talks about the link
purpose in context. For Level AAA 2.4.9 Link purpose (link only) it will be
failed.
Regards - Rakesh

On Mon, Dec 16, 2019 at 2:57 PM Srinivasu Chakravarthula <
= EMAIL ADDRESS REMOVED = > wrote:

> I think it needs to have association with product name; else users would
> not know which product does have the offer.
> Regards,
>
> Srinivasu Chakravarthula - Twitter: http://twitter.com/CSrinivasu/
> Website: http://www.srinivasu.org | http://serveominclusion.com
>
> Let's create an inclusive web!
>
> Senior Accessibility Program Manager, Watermark
>
>
> On Mon, Dec 16, 2019 at 2:39 PM allyssa jessicon <
> = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > nHi all,
> > Let me come to the matter straight, take a scenario where there two
> > or more same label in a page provided for the same element –
> > For instance: in a shopping page, above most of the products picture
> > there is an offer like ‘Get 50% off for the device', is it okay to
> > have more than one label with the same name for different products?
> > What if the label and or link opens a same modal window for different
> > products?
> > > > > > > > > >
> > > > >