Verificação HTML: O "role" "dialog" é desnecessário para o elemento "dialog".

Sobre este problema HTML

O elemento <dialog> foi introduzido para fornecer uma forma nativa de criar caixas de diálogo modais e não-modais em HTML. Como definido no WHATWG HTML Living Standard e na especificação ARIA in HTML, cada elemento <dialog> carrega automaticamente um role dialog implícito. Isto significa que tecnologias assistivas como leitores de ecrã já o reconhecem como um diálogo sem qualquer marcação ARIA adicional.

Quando adiciona explicitamente role="dialog" a um elemento <dialog>, está a reafirmar o que o navegador e as tecnologias assistivas já sabem. Isto viola a primeira regra de uso do ARIA: não use ARIA se puder usar um elemento ou atributo HTML nativo com a semântica já incorporada. Embora esta redundância não vá quebrar a funcionalidade, sobrecarrega a sua marcação e sinaliza a outros programadores (e validadores) que o autor pode não compreender a semântica incorporada do elemento.

Este princípio aplica-se amplamente através do HTML. Muitos elementos têm roles ARIA implícitos — <nav> tem navigation, <main> tem main, <button> tem button, e assim por diante. Adicionar o role correspondente explicitamente a qualquer um destes elementos produz um aviso de validador semelhante.

Como corrigir

Simplesmente remova o atributo role="dialog" do elemento <dialog>. A semântica incorporada trata de tudo automaticamente. Se precisar de fornecer contexto adicional para tecnologias assistivas, considere usar aria-label ou aria-labelledby para dar ao diálogo um nome acessível descritivo — isso é informação suplementar genuinamente útil em vez de um role redundante.

Exemplos

Incorreto: atributo `role` redundante

<dialog role="dialog">
  <h2>Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>

Isto despoleta o aviso do validador porque role="dialog" duplica o role implícito do elemento <dialog>.

Correto: confiar na semântica implícita

<dialog>
  <h2>Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>

Correto: adicionar um nome acessível descritivo

<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm action</h2>
  <p>Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</dialog>

Usar aria-labelledby para associar o diálogo com o seu cabeçalho é um melhoramento significativo — dá ao diálogo um nome acessível que os leitores de ecrã anunciam quando o diálogo abre. Este é o tipo de uso do ARIA que genuinamente melhora a acessibilidade, em oposição a reafirmar redundantemente o role do elemento.