Links with no text

Screen-reader users often move through a page by its links alone, pulled out into a list. A link with no text (a social icon, a logo with no alt, an empty <a> wrapped round a card) is read as "link", or as its address spelt out. Search engines lose something too: the words of a link are how they learn what the page at the other end is about.

Links that do have words, but only "click here" or "read more", are a milder problem and only a notice: in that list of links, six of them say "read more" and nothing tells them apart. The guidelines accept a link whose purpose is clear from the sentence around it, so this is about being kind rather than being wrong.

Sources: WCAG 2.2, 2.4.4 Link Purpose (In Context) and 4.1.2 Name, Role, Value (both Level A); Google on anchor text.

An icon or image link needs a name of its own:

<a href="https://instagram.com/flourandco" aria-label="Flour & Co on Instagram">
    <svg aria-hidden="true">…</svg>
</a>
<a href="/"><img src="/logo.svg" alt="Flour & Co home"></a>

For "read more", put the subject in the link, or add it for screen readers only:

<a href="/blog/sourdough">Read more<span class="sr-only"> about our sourdough</span></a>