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

Question

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.

Answer 1

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>