Verificação HTML: O atributo "aria-hidden" não deve ser especificado no elemento "link".

Sobre este problema HTML

O elemento <link> é usado para definir relações entre o documento atual e recursos externos—mais comummente folhas de estilo, favicons e recursos pré-carregados. É um elemento vazio (não tem tag de fecho) e não produz conteúdo renderizado na página. Como os elementos <link> são inerentemente não-visíveis e já estão ausentes da árvore de acessibilidade, o atributo aria-hidden não serve qualquer propósito neles.

O atributo aria-hidden foi concebido para controlar a visibilidade de conteúdo renderizado para tecnologias assistivas como leitores de ecrã. Quando definido como "true" num elemento visível, indica às tecnologias assistivas para ignorarem esse elemento e os seus descendentes. Aplicá-lo a um elemento <link> é contraditório—está a tentar esconder algo das tecnologias assistivas que nunca lhes foi exposto em primeiro lugar. A especificação HTML proíbe explicitamente esta combinação, e o validador W3C irá sinalizá-la como um erro.

Esta questão surge por vezes quando os programadores aplicam aria-hidden de forma ampla através de sistemas de templates, frameworks JavaScript, ou ferramentas de build que injetam atributos em múltiplos tipos de elementos sem distinguir entre elementos de conteúdo visível e elementos de metadados. Também pode acontecer quando se copiam padrões de atributos de elementos <a> (que partilham a palavra “link” conceptualmente mas são elementos completamente diferentes) para elementos <link>.

Como corrigir

A correção é simples: remova o atributo aria-hidden do elemento <link>. Não é necessário qualquer atributo de substituição ou alternativo porque os elementos <link> já são invisíveis às tecnologias assistivas.

Se a sua intenção original era esconder um elemento visível dos leitores de ecrã, certifique-se de que está a aplicar aria-hidden ao elemento correto—um elemento de conteúdo renderizado como <div>, <span>, <img>, ou <a>, não um elemento de metadados como <link>.

Exemplos

Incorreto: `aria-hidden` num 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">

Correto: `<link>` sem `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">

Correto: `aria-hidden` usado num elemento visível em vez disso

Se precisar de esconder um elemento decorativo dos leitores de ecrã, aplique aria-hidden ao próprio elemento renderizado:

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

Incorreto vs. correto num documento completo

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

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