CODEWITHSUNDEEP
htmlwai-arialighthouse
Taylor A. Leach
Taylor A. Leach

Reputation: 2324

Is an aria-label needed for basic (all) link tags?

Trying to figure out why a Lighthouse audit flagged a bunch of my links as failing the elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

My question is do all links need aria-labels because I thought if it's just a normal link the text inside the link is what is required?

Or is there something else going on with the structure of my markup? Another flagged element is this one:

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

For that one I understand that the a has no text so the aria-label should go on the div with the actual post title, correct?

SOLVED I was looking at the wrong element... Have a nice day.

Upvotes: 3

Views: 8307

Answers (2)

Tsundoku
Tsundoku

Reputation: 2697

The aria-label attribute on links (a elements with a href attribute) should only be used when, for whatever reason, it is not possible or not desirable to use perceivable link text. (This includes the alt attribute in image links.) If you have normal link text, you should not use the aria-label attribute because that attribute would override the link text. See step F of the text alternative computation in the document Accessible Name and Description Computation 1.1: the a element has an inherent role that allows the computation of its name from its content (i.e. the link text and/or the alt attribute on an img in the link). However, this step is only followed if there is no aria-label attribute on the link element (see step C.

See also Principle 2: ARIA Can Both Cloak and Enhance, Creating Both Power and Danger in the WAI-ARIA Authoring Practices 1.1, which points out that ARIA sometimes overrides the original semantics or content, citing aria-label as an example.

So if Lighthouse flags links with perceivable link text and no aria-label attribute, there must be something else going on, such as CSS that hides elements.

Upvotes: 1

slugolicious
slugolicious

Reputation: 17475

Both of your examples are fine and should not be flagged. Something else must be going on. Is the code you posted exactly what was being tested?

ARIA attributes should be used sparingly and are only meant to be used when native markup isn't sufficient. For links, as you said, if there's any text between the <a>...</a>, then that's "discernible text".

If the link doesn't have any direct text but if a child element does, then you're also ok, such as your second example. The <a> doesn't have text but the second <div> has "Post Title". All the child elements of the <a> are considered when looking for the "discernible text". When I tab to that link, I'll hear "Post Title, link" from a screen reader.

However, CSS can affect this. If your class="article-thumbnails-small__title" on the second <div> has a display:none or visibility:hidden, then that text will not be discernible because it's hidden.

If the class has width/height:0px, then it might not be discernible either. Sometimes 0 sized elements are considered hidden.

If your link does not have text but has a nested <img>, as long as the image has alt text, then you're ok.

Good:

<a href="foo.html">
  <img src="foo.jpg" alt="foo">
</a>

No Discernible Text:

<a href="foo.html">
  <img src="foo.jpg">
</a>

Upvotes: 5

Related Questions