WTF: WCAG Technique Failure – No Accessible Name for Links
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.
Each WCAG criterion includes detailed requirements for content to successfully meet the criterion. There may also be specific examples and scenarios of content that fail the criterion. 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
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 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. This link text is announced to screen readers.
WCAG Failure
WCAG Failure F89 applies to situations where a “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 “Powered by GoDaddy Airo” logo meets the conditions of this failure. 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&utm_source=wsb&utm_medium=applications&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.
- All websites built using GoDaddy Airo automatically include WCAG failures.