Nós de dialog e alertdialog ARIA devem ter um nome acessível

Quando um diálogo aparece no ecrã, as tecnologias assistivas anunciam-no ao utilizador juntamente com o seu nome acessível. Este nome fornece contexto essencial — informa o utilizador sobre o que se trata o diálogo, como “Confirmar eliminação” ou “Iniciar sessão na sua conta.” Sem um nome acessível, os utilizadores de leitores de ecrã ouvem que um diálogo foi aberto mas não têm forma de compreender o seu propósito, o que pode ser desorientador e tornar a interface difícil de usar.

Este problema afeta principalmente utilizadores que são cegos ou têm baixa visão e dependem de leitores de ecrã, bem como utilizadores com limitações de mobilidade que navegam com tecnologia assistiva. É sinalizado como um problema grave pelo motor de acessibilidade axe e está alinhado com as melhores práticas de acessibilidade da Deque.

Como corrigir

Assegure-se de que cada elemento com role="dialog" ou role="alertdialog" tem um nome acessível usando um destes métodos:

1. aria-label — Forneça um nome conciso e descritivo diretamente no elemento do diálogo.
2. aria-labelledby — Referencie o id de um elemento visível (normalmente um cabeçalho) dentro do diálogo que serve como o seu título.
3. title — Use o atributo HTML title como recurso alternativo, embora aria-label ou aria-labelledby sejam preferíveis.

Independentemente do método que escolher, certifique-se de que o nome descreve claramente o propósito do diálogo. Evite strings vazias ou referências a elementos que não existem ou não têm conteúdo de texto.

Exemplos

Incorreto: Diálogo sem nome acessível

O diálogo não tem aria-label, aria-labelledby, ou title, pelo que os leitores de ecrã não conseguem anunciar o seu propósito.

<div role="dialog">
  <h2>Unsaved Changes</h2>
  <p>You have unsaved changes. Do you want to save before leaving?</p>
  <button>Save</button>
  <button>Discard</button>
</div>

Incorreto: aria-label vazio

Um aria-label vazio não fornece informação útil às tecnologias assistivas.

<div role="alertdialog" aria-label="">
  <p>An error occurred while saving your file.</p>
  <button>OK</button>
</div>

Incorreto: aria-labelledby a apontar para um elemento inexistente ou vazio

Se o elemento referenciado não existe ou não contém texto, o diálogo continua sem nome acessível.

<div role="dialog" aria-labelledby="dialog-title">
  <p>Please confirm your selection.</p>
  <button>Confirm</button>
</div>
<!-- No element with id="dialog-title" exists -->

<div role="dialog" aria-labelledby="dialog-title">
  <span id="dialog-title"></span>
  <p>Please confirm your selection.</p>
  <button>Confirm</button>
</div>

Correto: Usar aria-labelledby para referenciar um cabeçalho

O atributo aria-labelledby aponta para o cabeçalho visível do diálogo, dando-lhe um nome acessível claro.

<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Unsaved Changes</h2>
  <p>You have unsaved changes. Do you want to save before leaving?</p>
  <button>Save</button>
  <button>Discard</button>
</div>

Correto: Usar aria-label

O atributo aria-label fornece um nome conciso diretamente no diálogo.

<div role="alertdialog" aria-label="File save error">
  <p>An error occurred while saving your file. Please try again.</p>
  <button>Retry</button>
  <button>Cancel</button>
</div>

Correto: Usar o atributo title

O atributo title funciona como um mecanismo de nomeação alternativo, embora aria-label ou aria-labelledby sejam geralmente preferíveis porque title tem suporte inconsistente entre tecnologias assistivas.

<div role="dialog" title="Export Settings">
  <p>Choose a format for your export.</p>
  <select>
    <option>PDF</option>
    <option>CSV</option>
  </select>
  <button>Export</button>
  <button>Cancel</button>
</div>

Learn more:

Deque Reference

Deque University - How To Fix

→