Rótulos de diálogos

O Silktide verifica se os diálogos — janelas pop-up que aparecem sobre a página — declaram um nome que possa ser lido por , para que as pessoas saibam o que acabou de abrir.

Um diálogo é marcado em atribuindo a um elemento a função dialog. A função informa à tecnologia assistiva que uma janela separada apareceu, mas, por si só, não diz para que serve a janela.

<!-- Problema: um diálogo sem nome acessível -->
<div role="dialog">
  <p>A sua sessão está prestes a expirar.</p>
</div>

Por que isso é importante

Quando um diálogo é aberto, um anuncia-o e move o foco do visitante para dentro dele. Se o diálogo tiver um nome, o ouvinte ouvirá algo como "Tempo limite da sessão, diálogo" e compreenderá imediatamente a interrupção. Sem um nome, ouvirá apenas "diálogo" — foi afastado do que estava a fazer sem qualquer explicação e terá de explorar o conteúdo para perceber o motivo.

Como corrigir

Dê a cada diálogo um , utilizando uma das seguintes opções:

aria-labelledby apontando para o id do título visível do diálogo — a melhor opção, porque os visitantes que veem a página terão o mesmo nome:

<!-- Corrigido: o diálogo recebe o nome do seu título -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Tempo limite da sessão</h2>
  <p>A sua sessão está prestes a expirar.</p>
</div>

aria-label com o nome como texto, quando o diálogo não tem um título visível:

<div role="dialog" aria-label="Tempo limite da sessão">
  ...
</div>

Como o Silktide testa isto

Encontra todos os elementos de cada página cuja role seja dialog.
Determina o nome acessível de cada diálogo, a partir de atributos como aria-label e aria-labelledby.
Comunica cada diálogo cujo nome acessível esteja em falta ou vazio.

Resolução de problemas

O meu diálogo só aparece depois de uma interação do utilizador

O Silktide examina cada página à medida que carrega. Um diálogo que só seja adicionado à página mais tarde — por exemplo, depois de clicar num botão — pode não ser testado, mas ainda precisa de um rótulo para os visitantes que chegarem até ele.

Utilizo o elemento de diálogo nativo

Esta verificação examina elementos que declaram explicitamente role="dialog". Um elemento nativo <dialog> sem essa função não é testado, mas as orientações continuam a aplicar-se: dê-lhe um nome acessível com aria-labelledby ou aria-label.