How to fix Lighthouse "Links do not have a discernible name"

The 'aria-label' attribute: Your Accessibility Superpower

Employing aria-label attribute is like having a superpower—perfect for enhancing web accessibility, especially for elements devoid of visible text. When you've got some crisp and cool images or icons playing the role of links, lacking any accompanying text, an aria-label can save the day.

<a href="https://socialnetwork.com/user/profile" aria-label="View user profile">
  <img src="user-icon.svg" alt="" />
</a>


We don't judge a book by its cover, but screen readers will announce View user profile here. No visible text is no more a disaster, you see?

The Art of Invisible Text

Preserving a clean page design while supporting accessibility? It's not a magic trick!. Consider crafting a hidden <span>:

<a href="https://example.com">
  <img src="search-icon.svg" aria-hidden="true" />
  <span class="visually-hidden">Search</span>
</a>


You can make Harry Potter's Invisibility Cloak using CSS to visually hide the text. Don't worry, screen readers can still read it (plot twist!):

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* added for orca */
}


Tada! Your webpage stays elegent and accessible at the same time.

'title' attribute: The Unsung Hero

While aria-label is quite a team lead, the title attribute can play the perfect sidekick, delivering extra information on mouseover:

<a href="https://example.com" title="Read more about our services" aria-label="Services">
  <img src="services-icon.svg" alt="" />
</a>


Double READiness! While our title attribute gets you a tooltip, aria-label ensures smooth navigation for assistive technologies.

Catering to Pop-up Link Fans

Can't get enough of pop-up links or modal dialogs in your design? Great! For those, playing the aria-haspopup="true" and tabindex="0" cards can significantly boost interactive accessibility:

<a href="#" aria-haspopup="true" tabindex="0" aria-label="Open settings dialog">
  <img src="settings-icon.svg" alt="" />
</a>


This lets your users know they are in for a slick new UI experience after clicking the link.

Managing Background Image links

Links utilizing background images can be pretty, and pretty challenging. Here, an aria-label rides in like a knight in shining armour:

<a href="https://example.com/discounts" aria-label="View discount items" style="background-image: url('sale-banner.svg'); width: 200px; height: 100px;"></a>


A beautiful link that looks good and speaks well—an ideal date, isn't it?

Handling Dynamic Content

Dynamic content—AJAX-loaded links, for instance, should also be uniquely tagged and labeled. Make sure your trusty scripts keep the aria-labels or alt texts updated as the content evolves.

'title' Attribute: The Fancy Chauffeur

Ah, the title attribute. While it’s quite the gentleman, it cannot replace the trusty aria-label or visible text—think of it as a fancy chauffeur for your hover content but not a replacement for accessibility essentials.