Internal links with no link text

What it is

The page contains links to other pages on your site that have no text inside them. They are usually icon links drawn with SVG or an icon font, such as an arrow or a cart, empty links laid over a card to make the whole card clickable, or links whose text is filled in by JavaScript.

Why it matters

Google uses link text , or an image’s alt text, to understand the page a link points to, so an empty link tells it nothing. People using a screen reader get no clue where the link goes, and WCAG 2.4.4 Link Purpose  asks that a link’s purpose be clear from its text.

How Asky checks it

Asky reads the page’s links from its raw HTML; JavaScript links are not seen. The page is reported when a link to its own host contains no text at all. Any text inside counts, even visually hidden text or an SVG <title>; aria-label and title attributes do not. Links wrapping only an image are not checked here, even without alt text, nor are links to the page itself. A link with no accessible name at all also raises the accessibility issue for link names. It runs in full-site audits and selected-page audits of up to 8,000 pages, with Link analysis on, that reached every page without blocks or errors; error pages are skipped.

Reported as an opportunity with medium severity.

How to fix it

1. For icon links, put text inside the link: a visible label next to the icon, a visually hidden one, or a <title> inside the SVG. That clears this issue and the accessibility one; an aria-label alone clears only the accessibility one.
2. For clickable cards with an empty overlay link, make the card’s heading the link and stretch its clickable area over the card with CSS.
3. If the text is filled in by JavaScript, render it in the HTML the server sends.
4. Name the destination. Text such as “More” or “Details” is reported as generic link text.

Example

A cart icon on https://example.com/blog/pricing-guide links to the cart with no text. A visually hidden label gives it a name that search engines and screen readers both read:

<!-- Before -->
<a href="/cart"><svg aria-hidden="true">...</svg></a>
 
<!-- After -->
<a href="/cart"><svg aria-hidden="true">...</svg><span class="visually-hidden">Shopping cart</span></a>

← Back to Links