About This HTML Issue
The <link> element is used to define relationships between the current document and external resources—most commonly stylesheets, favicons, and preloaded assets. It is a void element (it has no closing tag) and it produces no rendered content on the page. Because <link> elements are inherently non-visible and already absent from the accessibility tree, the aria-hidden attribute serves no purpose on them.
The aria-hidden attribute is designed to control the visibility of rendered content for assistive technologies like screen readers. When set to "true" on a visible element, it tells assistive technologies to skip that element and its descendants. Applying it to a <link> element is contradictory—you’re trying to hide something from assistive technologies that was never exposed to them in the first place. The HTML specification explicitly disallows this combination, and the W3C validator will flag it as an error.
This issue sometimes arises when developers apply aria-hidden broadly through templating systems, JavaScript frameworks, or build tools that inject attributes across multiple element types without distinguishing between visible content elements and metadata elements. It can also happen when copying attribute patterns from <a> elements (which share the word “link” conceptually but are entirely different elements) onto <link> elements.
How to fix it
The fix is straightforward: remove the aria-hidden attribute from the <link> element. No replacement or alternative attribute is needed because <link> elements are already invisible to assistive technologies.
If your original intent was to hide a visible element from screen readers, make sure you’re applying aria-hidden to the correct element—a rendered content element such as <div>, <span>, <img>, or <a>, not a metadata element like <link>.
Examples
Incorrect: aria-hidden on a <link> element
<link rel="stylesheet" href="styles.css" aria-hidden="true"><link rel="icon" href="favicon.ico" aria-hidden="true"><link rel="preload" href="font.woff2" as="font" type="font/woff2" aria-hidden="true">
Correct: <link> without aria-hidden
<link rel="stylesheet" href="styles.css"><link rel="icon" href="favicon.ico"><link rel="preload" href="font.woff2" as="font" type="font/woff2">
Correct: aria-hidden used on a visible element instead
If you need to hide a decorative element from screen readers, apply aria-hidden to the rendered element itself:
<link rel="stylesheet" href="styles.css">
<div aria-hidden="true">
<img src="decorative-swirl.png" alt="">
</div>Incorrect vs. correct in a full document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Incorrect: aria-hidden on link -->
<link rel="stylesheet" href="styles.css" aria-hidden="true">
</head>
<body>
<p>Hello, world!</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
<!-- Correct: no aria-hidden on link -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.