Links without an accessible name

What it is

One or more links on the page have no name that assistive technology can read, so nothing says where they go. A link gets its name from its text, alt text on an image inside it, an aria-label, or a <title> inside its SVG icon. Icon-only links are the usual cause: social media icons, a logo link whose image has empty alt text, or an empty link laid over a card to make the whole card clickable.

Why it matters

A screen reader announces such a link as just “link”, or reads out its web address, and voice control users cannot name it to follow it. AI agents that navigate pages rely on the same names: OpenAI says  its agent in ChatGPT Atlas uses ARIA labels and roles to understand interactive elements. A link with no name fails WCAG 2.4.4 Link Purpose (In Context)  and 4.1.2 Name, Role, Value, both Level A, and since June 2025 the European Accessibility Act requires many businesses selling to consumers online in the EU to meet them.

How Asky checks it

In the page’s raw HTML, Asky checks every <a> with an href, not script-added links. A link is named by its text, aria-label, an aria-labelledby whose target has text, image alt or an SVG <title> inside it, or title; content marked aria-hidden or hidden does not count. Skipped: role="none" or "presentation", and links inside aria-hidden="true", hidden, <noscript> or <template>, or inline display: none or visibility: hidden. One issue per page gives the count and up to 20 examples. Internal links with no text or image are also reported as having no anchor text, which ignores aria-label and title.

Reported as an error with high severity.

How to fix it

1. Find the links listed in the issue. They are usually social icons, logo links, or empty links laid over cards.
2. For a link around an image, give the image alt text that names the destination (“Example home”), not the picture (“blue logo”).
3. For an icon-only internal link, put text inside the link, visually hidden with a screen-reader-only class if the design has no room. An aria-label alone clears this issue but still leaves the internal link reported as having no anchor text.
4. For an icon-only link to another site, such as a social profile, an aria-label naming the destination is enough (“Example on LinkedIn”). Hide the icon itself with aria-hidden="true".
5. For a clickable card, put the link on the card’s heading text and stretch its clickable area with CSS, instead of an empty link over the card.
6. Delete empty links a template leaves behind, such as an <a href="#"> with nothing inside.
7. In a site builder, look for an alt text or accessibility label field in the link, image or icon settings.

Example

The logo in the header of https://example.com links home through an image with empty alt text:

<!-- Before: announced as "link" -->
<a href="/"><img src="/images/logo.svg" alt=""></a>
 
<!-- After: announced as "Example home" -->
<a href="/"><img src="/images/logo.svg" alt="Example home"></a>

← Back to Accessibility