E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Label in name

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

From: Jon Brundage
Date: Thu, May 06 2021 12:38PM
Subject: Label in name
No previous message | Next message →

Hello-

A common practice to make links unique and understandable while preserving
minimum link text length is to append the link with hidden text via CSS.

For example:

<A href="RecipePie.html">Recipe for apple
pie</a>

Is this a violation of WCAG 2.1 2.5.3 "Label in name" ? And if so, are there
any alternatives other than displaying the full link text?

Thanks

Jon

From: Jonathan Whiting
Date: Thu, May 06 2021 12:53PM
Subject: Re: [EXT] Label in name
← Previous message | Next message →

<A href="RecipePie.html">Recipe for apple
pie</a>

This example passes WCAG 2.1 2.5.3 "Label in Name" because the visible label of "Recipe" is contained within the link's accessible "name" (the information presented to assistive technology): "Recipe for apple Pie". I'm not suggesting that additional hidden text for a screen reader is a good idea--I think it is often overused--just that it meets the "label in name" requirement.

For a longer answer to your question, I'd recommend reading https://webaim.org/articles/label-name/.

Hope this helps,
Jon

Jonathan Whiting
Director of Training, WebAIM
WebAIM<https://webaim.org> | Center for Persons with Disabilities<https://cpd.usu.edu> | Utah State University<https://usu.edu>

From: Jared Smith
Date: Thu, May 06 2021 12:56PM
Subject: Re: [EXT] Label in name
← Previous message | Next message →

> <A href="RecipePie.html">Recipe for apple
> pie</a>

> Is this a violation of WCAG 2.1 2.5.3 "Label in name" ? And if so, are there
> any alternatives other than displaying the full link text?

It's not a "Label in name" failure because the label ("Recipe") is within the accessible name ("Recipe for apple pie").

This can be potentially confusing for screen reader users to hear hidden content, though does address the ambiguity of the link. It can also pose issues for voice control users because the visual text does not align with the underlying link text. So it solves some problems but introduces others.

A better approach is to just provide the full text in the link. This is almost always going to be better for everyone and can typically be accomplished with some creativity.

Jared

From: glen walker
Date: Thu, May 06 2021 12:56PM
Subject: Re: Label in name
← Previous message | Next message →

No, it's not a violation. It helps both 2.4.4 and 2.5.3. The hidden text
is not visible. Only the visible text needs to be part of the accessible
name.

This would be a violation:

<a href="..." aria-label="yummy apple pie">apple pie recipe</a>

Since the visible text is "apple pie recipe", those words need to be part
of the accessible name. In this case, the accessible name is "yummy apple
pie". It's close, but still fails since "recipe" is not part of the
accessible name. A speech interface user would not be able to say "click
recipe" even though they see the word "recipe" in the link.

On Thu, May 6, 2021 at 12:38 PM Jon Brundage via WebAIM-Forum <
= EMAIL ADDRESS REMOVED = > wrote:

> Hello-
>
>
>
> A common practice to make links unique and understandable while preserving
> minimum link text length is to append the link with hidden text via CSS.
>
>
>
> For example:
>
>
>
> <A href="RecipePie.html">Recipe for apple
> pie</a>
>
>
>
> Is this a violation of WCAG 2.1 2.5.3 "Label in name" ? And if so, are
> there
> any alternatives other than displaying the full link text?
>
>
>
> Thanks
>
>
>
> Jon
>
> > > > >

From: Peter Weil
Date: Thu, May 06 2021 1:23PM
Subject: Re: [EXT] Label in name
← Previous message | No next message

Just to add to Jared's response, there are alternatives to displaying the full link text. Offscreen text is one. There are also the aria-label and aria-labelledby attributes. How these attributes behave can vary with different screenreaders. The following articles (and there are others) may be helpful:

https://www.deque.com/blog/text-links-practices-screen-readers/

https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/

Peter

--
Peter Weil, Web Developer
University Marketing
University of WisconsinâMadison
= EMAIL ADDRESS REMOVED =
(m) 608-220-3089

On May 6, 2021, 1:56 PM -0500, Jared Smith < = EMAIL ADDRESS REMOVED = >, wrote:
<A href="RecipePie.html">Recipe for apple
pie</a>

Is this a violation of WCAG 2.1 2.5.3 "Label in name" ? And if so, are there
any alternatives other than displaying the full link text?

It's not a "Label in name" failure because the label ("Recipe") is within the accessible name ("Recipe for apple pie").

This can be potentially confusing for screen reader users to hear hidden content, though does address the ambiguity of the link. It can also pose issues for voice control users because the visual text does not align with the underlying link text. So it solves some problems but introduces others.

A better approach is to just provide the full text in the link. This is almost always going to be better for everyone and can typically be accomplished with some creativity.

Jared