WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXT] Label in name

for

From: Peter Weil
Date: May 6, 2021 1:23PM

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 REMOVED>
(m) 608-220-3089

On May 6, 2021, 1:56 PM -0500, Jared Smith < <EMAIL REMOVED> >, wrote:
<A href="RecipePie.html">Recipe <span class="hidden"> for apple
pie</span></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