Explique a abertura de novas abas

A Silktide encontra links que abrem em uma nova aba ou janela e informa quais não deixam isso claro. Os visitantes devem ser avisados antes que um link os retire da página em que estão.

Por que isso é importante

Abrir uma nova aba sem avisar contraria as expectativas do visitante: o botão Voltar deixa de funcionar, e ele pode nem perceber que existe uma nova aba. Usuários de podem não ouvir nenhum aviso de que o contexto mudou, e pessoas com dificuldades cognitivas ou pouca experiência na web podem ficar desorientadas, sem saber como voltar. Algumas palavras de aviso no texto do link evitam tudo isso.

A melhor solução muitas vezes é não abrir novas abas — deixe que os visitantes escolham. Quando isso for necessário, esta verificação confirma se o link informa isso, contribuindo para o critério de sucesso 3.2.5 da (Mudança sob solicitação), um requisito de .

Como corrigir

Prefira remover target="_blank" para que o link abra normalmente.
Quando uma nova aba for justificável, adicione uma explicação ao texto do link:

<a href="products.html" target="_blank">
  Produtos (abre em uma nova aba)
</a>

Para um link de imagem, coloque a explicação no :

<a href="products.html" target="_blank">
  <img src="products.jpg" alt="Produtos (abre em uma nova aba)">
</a>

Para abranger muitos links de uma só vez, o pode adicionar o texto automaticamente:

/* Adiciona o aviso a todos os links que abrem em uma nova aba */
a[target="_blank"]::after {
  content: " (abre em uma nova aba)";
}

Como alternativa, use um rótulo , que altera o que é anunciado sem mudar a aparência do link. Observe que aria-label substitui completamente o texto do link, portanto deve repeti-lo:

<a href="products.html" target="_blank" aria-label="Produtos (abre em uma nova aba)">
  Produtos
</a>

Um ícone sozinho não é suficiente — o aviso deve existir como texto que um leitor de tela possa anunciar (o texto alt de um ícone conta).

Como a Silktide testa isso

Encontra todos os links na página com target="_blank", o atributo que abre uma nova aba ou janela, ignorando os elementos que você excluiu da verificação.
Reúne o texto legível de cada link: seu conteúdo textual, o texto alternativo e o texto de título dos elementos dentro dele, qualquer rótulo ARIA e o texto adicionado com ::before e ::after do CSS.
Considera o link aprovado se esse texto contiver uma explicação reconhecida: “nova aba”, “nova janela”, “nova aba do navegador”, “nova janela do navegador” ou “link externo” (equivalentes em galês também são reconhecidos).
Informa todos os demais links que abrem em uma nova aba.

Solução de problemas

Meu link se explica com outras palavras

Somente as frases acima são reconhecidas. Se a sua formulação for um equivalente genuíno, como “abre em uma janela pop-up”, padronize o texto usando uma frase reconhecida ou o resultado.

“Janela” ou “aba”?

Quase todos os navegadores modernos abrem links com target="_blank" em uma aba, então “abre em uma nova aba” costuma ser uma formulação mais clara, embora ambas sejam aprovadas.