web developer looking at a screen displaying the error message "No Accessible Name".

WTF: WCAG Technique Failure – No Accessible Name for Links

ByRenee Dunn, CPWA Updated on Reading Time: 2 minutes

Are you writing your alt text correctly when the image is linked to another page? It’s different than writing alt text for an image that is not linked.

In this article, we’ll look at a failure that applies to 2.4.4: Link Purpose (In Context), 2.4.9: Link Purpose (Link Only), and 4.1.2: Name, Role, Value.

Link Purpose and Accessible Name

WCAG 2.4.4: Link Purpose (In Context), 2.4.9: Link Purpose (Link Only), and 4.1.2: Name, Role, Value all require that the purpose of a link can be programmatically determined based on the associated link text to “help users … decide whether they want to follow it”.  Acceptable link text, also known as the accessible name for the link, can come from directly linked text, the alt text of the linked image, an aria-label attribute for the link, or an aria-labelledby attribute for the link.  The accessible name of the link is announced to screen readers. 

WCAG Failure

If your linked image does not have alt text, it will fail WCAG because the “link contains only non-text content, such as an image, and that link cannot be identified by an accessible name”. 

Testing sites built using GoDaddy Airo uncovered that the linked “Powered by GoDaddy Airo” logo does not have an accessible name.  A simplified version of the code shows the A tag surrounding an SVG image that does not have any alt text or aria label. 

<a href="https://www.godaddy.com/websites/website-builder?isc=pwugc&amp;utm_source=wsb&amp;utm_medium=applications&amp;utm_campaign=en-us_corp_applications_base">
  <svg viewBox="0 0 131 20" fill="currentColor" width="131" height="20">
    <g>
      <path d="***" fill="black"></path>
      <path d="***" fill="black"></path>
    </g>
  </svg>
</a>

Key Takeaways

  • Linked images always need to have alt text or an aria label that indicates the purpose of the link. Without an accessible name, you will end up with an “Accessibility Tree Not Well Formed” error in Google Lighthouse because you have a link without “discernable text“.
  • All websites built using GoDaddy Airo automatically include a WCAG failure.

The WTF: WCAG Technique Failure article series highlights real-world examples of failures for specific WCAG criteria.  To the extent possible, I’ve tried to protect the identity of the website.

Ready to Get Started?

If you would like to talk about how Elevage Digital can address your specific needs, provide some details to start the conversation.

Let’s Go!