Como corrigir ‘Links must have discernible text’ no relatório do PageSpeed usando Elementor

Para corrigir o erro ‘Links must have discernible text’ na auditoria de Navegação agêntica do PageSpeed, basta inserir um title ou aria-label nos links que não possível um texto descritivo – imagens ou ícones com links, por exemplo.

Para fazer isto, basta clicar em ‘opções de link’ e, em seguida, adicionar um atributo personalizado no padrão:

title|Texto descritivo ou aria-label|Texto descritivo

Diferenças entre aria-label e title

Aria-label e title podem parecer semelhantes, mas têm finalidades bem diferentes. A regra geral é:

• aria-label: fornece um nome acessível para tecnologias assistivas (como leitores de tela).
• title: fornece uma dica visual (tooltip) em alguns navegadores quando o usuário passa o mouse sobre o elemento.

aria-label

Use quando um elemento não possui um texto visível suficiente para descrever sua função.

Exemplo:

<button aria-label="Fechar">
    <svg>...</svg>
</button>

Visualmente o botão mostra apenas um ícone, mas um leitor de tela anunciará:

“Fechar, botão”

title

O atributo title serve para fornecer uma informação adicional ao usuário.

Exemplo:

<button title="Fechar janela">
    <svg>...</svg>
</button>

Em muitos navegadores, ao passar o mouse aparece um tooltip.

Entretanto:

• Nem todos os dispositivos exibem esse tooltip (como telas touch).
• Muitos leitores de tela ignoram ou tratam o title de forma inconsistente.
• O title não substitui um rótulo acessível.

Saiba mais em:

https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label

https://web.dev/articles/aria-labels-and-relationships?hl=pt-br