Validación HTML: El atributo "aria-hidden" no debe especificarse en el elemento "link".

Acerca de este problema HTML

El elemento <link> se utiliza para definir relaciones entre el documento actual y recursos externos—más comúnmente hojas de estilo, favicons y recursos precargados. Es un elemento vacío (no tiene etiqueta de cierre) y no produce contenido renderizado en la página. Debido a que los elementos <link> son inherentemente no visibles y ya están ausentes del árbol de accesibilidad, el atributo aria-hidden no tiene ningún propósito en ellos.

El atributo aria-hidden está diseñado para controlar la visibilidad del contenido renderizado para tecnologías asistivas como lectores de pantalla. Cuando se establece a "true" en un elemento visible, le dice a las tecnologías asistivas que omitan ese elemento y sus descendientes. Aplicarlo a un elemento <link> es contradictorio—estás intentando ocultar algo de las tecnologías asistivas que nunca estuvo expuesto a ellas en primer lugar. La especificación HTML prohíbe explícitamente esta combinación, y el validador W3C lo marcará como un error.

Este problema a veces surge cuando los desarrolladores aplican aria-hidden de manera amplia a través de sistemas de plantillas, frameworks de JavaScript o herramientas de construcción que inyectan atributos en múltiples tipos de elementos sin distinguir entre elementos de contenido visible y elementos de metadatos. También puede ocurrir al copiar patrones de atributos de elementos <a> (que comparten conceptualmente la palabra “link” pero son elementos completamente diferentes) a elementos <link>.

Cómo solucionarlo

La solución es sencilla: elimina el atributo aria-hidden del elemento <link>. No se necesita ningún reemplazo o atributo alternativo porque los elementos <link> ya son invisibles para las tecnologías asistivas.

Si tu intención original era ocultar un elemento visible de los lectores de pantalla, asegúrate de que estás aplicando aria-hidden al elemento correcto—un elemento de contenido renderizado como <div>, <span>, <img>, o <a>, no un elemento de metadatos como <link>.

Ejemplos

Incorrecto: `aria-hidden` en un elemento `<link>`

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

Correcto: `<link>` sin `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">

Correcto: `aria-hidden` usado en un elemento visible

Si necesitas ocultar un elemento decorativo de los lectores de pantalla, aplica aria-hidden al elemento renderizado en sí:

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

Incorrecto vs. correcto en un documento completo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
<!-- Incorrecto: aria-hidden en 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>
<!-- Correcto: sin aria-hidden en link -->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>