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

Quando uma caixa de diálogo aparece no ecrã, as tecnologias assistivas anunciam-na ao utilizador juntamente com o seu nome acessível. Este nome fornece contexto essencial — diz ao utilizador do que trata a caixa de diálogo, como “Confirmar eliminação” ou “Iniciar sessão na sua conta.” Sem um nome acessível, utilizadores de leitores de ecrã ouvem que uma caixa de diálogo foi aberta 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 visão reduzida e dependem de leitores de ecrã, bem como utilizadores com deficiências motoras que navegam com tecnologia assistiva. É sinalizado como um problema sério pelo motor de acessibilidade axe e alinha-se com as melhores práticas de acessibilidade da Deque.

Como corrigir

Certifique-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 da caixa de diálogo.
2. aria-labelledby — Referencie o id de um elemento visível (normalmente um cabeçalho) dentro da caixa de diálogo que serve como título.
3. title — Use o atributo HTML title como alternativa, 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 da caixa de 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: Caixa de diálogo sem nome acessível

A caixa de diálogo não tem aria-label, aria-labelledby, ou title, pelo que leitores de ecrã não podem 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, a caixa de 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 da caixa de diálogo, fornecendo-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 na caixa de 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

→