Screen reader links

Silktide finds link elements that are malformed in ways that break them for assistive technology - links with no readable text, links with no destination, and stray empty link tags left in the page.

For a link to work with assistive technology it needs both a destination (an href attribute) and something readable inside it:

<!-- Works: destination and readable text -->
<a href="/about">About us</a>

<!-- Works: an image link with alternative text -->
<a href="/apple"><img src="apple.png" alt="Apple"></a>

Why this matters

A screen reader announces each link by its text. A link with a destination but no text is announced as just "link" - the user can activate it but has no idea where it leads. A link with text but no destination appears clickable yet goes nowhere. Both patterns break the basic contract that lets people using assistive technology navigate a page by its links.

How to fix it

1. For a link with a destination but no readable text: add text inside the link, or alt text if it contains only an image.
2. For a link with text but no destination: add the missing href, or if the element is really a target for other links to jump to, move its id onto a non-link element instead:

<!-- Legacy target anchor, discouraged in HTML5 -->
<a name="example"></a>

<!-- Preferred: an id on a normal element -->
<div id="example">...</div>

3. For empty <a></a> tags with no attributes at all: remove them, they serve no purpose. They are often left behind by editors or scripts.
4. If the element is really a button - it triggers an action rather than navigating - use a <button> element, or add role="button" to the existing tag.

How Silktide tests this

1. Find every <a> element on the page and read its text (including image alt text and text added by CSS), its href, and any id or name attributes.
2. Flag three problem patterns:
   • A link with an href but no readable text.
   • An element with text and an id or name but no href - a target posing as a link, or a link missing its destination.
   • A completely empty anchor with no text, href, id, or name.
3. Two patterns are deliberately not flagged:
   • <a> with text but no href, id, or name - HTML5 permits this as a "placeholder link", commonly filled in later by JavaScript.
   • Empty anchors with an id or name but no href - these are legacy jump targets, not links.

Learn more

• Understanding Success Criterion 4.1.2: Name, Role, Value (WCAG 2.2)
• H91: Using HTML form controls and links (WCAG technique)
• Link purpose
• Empty link