Invisible anchor Elements: How to Verify and Resolve Hidden Link Issues

Summary

Overview

This issue occurs when an (anchor) element exists in the HTML but is not visible to users, often due to styling or implementation methods. These hidden links can still be detected by Siteimprove and may cause accessibility violations—such as missing text alternatives—because they are exposed to assistive technologies.

To validate the finding, it is important to inspect the underlying HTML. You can do this directly within Siteimprove using the HTML view tools or by using browser DevTools to locate and assess the element in the page structure.

Applies To (Environment)

Specify where and for whom this task applies.

• Product / Service: Siteimprove Accessibility
• Version (if applicable): All versions
• Platform / OS / Browser: All supported browsers and platforms
• User role / permissions: Web developers, content editors, accessibility specialists,

Problem / Issue

Mistake:

Not checking the source HTML for invisible <a> elements.

Resolution / Fix:

Look at the source HTML to see if this invisible link is really where Siteimprove says it is. The source HTML can be reviewed in either of two ways: 

Using the Siteimprove page report with the “HTML view” or “Show HTML” buttons 

Browser DevTools

DevTools comes pre-installed with every browser. It’s a “power user” feature which is hidden by default. To open DevTools, you typically press F12, or right-click then choose “Inspect” – but this article doesn’t focus on keyboard shortcuts and where to click. Instead, this article focuses on general techniques.

DevTools gives you the ability to inspect and edit the web page that you have open in your current tab. The “inspect” functionality lets you see the source HTML and CSS for the page. It’s under a tab called “Elements” in Chrome DevTools and “Inspector” in Firefox DevTools. 

The “edit” functionality is in the same place, and lets you edit that HTML and CSS. Your edits will exist only in your local copy of the page – the local copy that your browser automatically makes behind the scenes, every time you navigate to a page. Your edits will be automatically thrown away by the browser when you reload the page, so that you can start fresh with a new round of edits, or stop editing and browse the web in the regular way again.

Related Content

• Accessibility rule: Link without a text alternative, explained