# The “aria-hidden” attribute must not be specified on the “link” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-aria-hidden-attribute-must-not-be-specified-on-the-link-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<link rel="stylesheet" href="styles.css" aria-hidden="true">
```

```html
<link rel="icon" href="favicon.ico" aria-hidden="true">
```

```html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" aria-hidden="true">
```

### Correct: `<link>` without `aria-hidden`

```html
<link rel="stylesheet" href="styles.css">
```

```html
<link rel="icon" href="favicon.ico">
```

```html
<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:

```html
<link rel="stylesheet" href="styles.css">
<div aria-hidden="true">
  <img src="decorative-swirl.png" alt="">
</div>
```

### Incorrect vs. correct in a full document

```html
<!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>
```

```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>
```
