Rotulagem com o atributo title

O Silktide verifica os botões e links das suas páginas em busca de controles que dependem do atributo title para explicar o que fazem. Os navegadores exibem title apenas como uma dica de ferramenta atrasada quando o ponteiro do mouse passa sobre o elemento, portanto, a maioria das pessoas nunca a vê.

<!-- Problema: a dica de ferramenta é o único rótulo -->
<button title="Fechar"><svg>…</svg></button>

<!-- Correção: dê ao controle um nome acessível real -->
<button aria-label="Fechar"><svg>…</svg></button>

Por que isso é importante

Uma dica de ferramenta title aparece apenas para usuários de mouse e somente após um atraso. Usuários de teclado, usuários de dispositivos móveis e com tela sensível ao toque, e a maioria dos usuários de nunca a recebem. Por isso, um controle rotulado apenas pelo seu title é um botão misterioso para uma grande parte dos seus visitantes. Os leitores de tela também lidam com title de forma inconsistente: alguns o leem, outros o ignoram. Isso o torna pouco confiável até mesmo para os usuários que, em teoria, seriam atendidos por ele.

Quando um controle tem tanto um title quanto um diferente, o problema é a inconsistência: um usuário de mouse vê brevemente uma descrição, enquanto um usuário de tecnologia assistiva ouve outra, e as duas se distanciam cada vez mais à medida que a página é mantida.

Como corrigir

Dê ao controle um rótulo adequado: texto visível sempre que possível ou um aria-label de (ou aria-labelledby apontando para um texto existente) para controles que contêm apenas ícones.
Se o controle tiver um title e um aria-label que discordam, escolha a redação mais útil e use-a em todos os lugares. Normalmente, a solução mais simples é excluir o title e deixar que o aria-label transmita a descrição.
Mantenha title apenas para detalhes realmente complementares. Ele nunca deve ser a única forma de saber o que um controle faz.

Como o Silktide testa isso

Encontra os botões, links e controles de divulgação visíveis em cada página, incluindo elementos com role="button" ou role="link".
Para cada controle com um atributo title não trivial, verifica se ele tem qualquer outra forma de rotulagem: texto visível, de imagem, aria-label ou aria-labelledby.
Relata os controles cujo único rótulo é o atributo title.
Quando um controle tem tanto um title quanto um aria-label ou aria-labelledby explícito, compara os dois e os relata quando dizem coisas substancialmente diferentes. Se um simplesmente amplia o outro (um title com o valor "Pesquisar" e um nome com o valor "Pesquisar agora"), isso não é relatado.

Campos de formulário, como <input> e <select>, não são testados por esta verificação; a rotulagem deles é abordada em rótulos de controles de formulário.

Solução de problemas

O atributo title é obrigatório em iframes

Correto: title em um <iframe> é a forma padrão de nomeá-lo, e esta verificação não testa iframes. Ela testa apenas controles interativos, como botões e links.

Minha dica de ferramenta adiciona informações extras úteis

Esse é um uso legítimo, desde que o controle também tenha um rótulo real. Esta verificação só relata controles em que o title é o único rótulo ou em que ele contradiz o nome acessível.