Verificação HTML: Valor incorreto "dialog" para o atributo "role" no elemento "dialog".

Sobre este problema HTML

A especificação HTML define um conjunto de papéis ARIA implícitos (também chamados de “semântica nativa”) para muitos elementos HTML. O papel implícito do elemento <dialog> é dialog, o que significa que tecnologias assistivas como leitores de ecrã já o anunciam corretamente sem qualquer marcação ARIA explícita. Quando você adiciona role="dialog" a um elemento <dialog>, está a reafirmar o que o navegador e a árvore de acessibilidade já sabem—e a especificação ARIA in HTML restringe explicitamente isto.

A especificação ARIA in HTML mantém uma lista de papéis permitidos para cada elemento HTML. Para <dialog>, a única substituição de papel permitida é alertdialog (para diálogos que requerem uma resposta imediata do utilizador). Definir role="dialog" não está listado como um valor permitido porque duplica a semântica nativa, e a especificação trata tal redundância como um erro de conformidade. É por isto que o Validador W3C reporta: Valor incorreto “dialog” para o atributo “role” no elemento “dialog”.

Porque isto é importante

Conformidade com padrões: O Validador W3C aplica a especificação ARIA in HTML, que proíbe atribuições de papéis redundantes em elementos que já carregam esse papel implicitamente. Marcação válida garante que as suas páginas estão em conformidade com os padrões web.
Clareza de acessibilidade: Embora a maioria das tecnologias assistivas lidem graciosamente com papéis redundantes hoje em dia, atributos ARIA desnecessários adicionam ruído à base de código e podem causar confusão sobre se a semântica nativa do elemento está intencionalmente a ser substituída. A primeira regra do ARIA é: não use ARIA se um elemento HTML nativo já fornece a semântica de que você precisa.
Manutenibilidade: Remover atributos redundantes mantém o seu HTML limpo e mais fácil de manter. Programadores futuros não precisarão de se questionar se o papel explícito foi adicionado intencionalmente para contornar um bug.

Como corrigir

Localize qualquer elemento <dialog> com um atributo role="dialog".
Remova o atributo role inteiramente.
Se você precisar que o diálogo se comporte como um diálogo de alerta (um que interrompe o utilizador e exige atenção imediata), use role="alertdialog" em vez disso—esta é a única substituição de papel permitida para <dialog>.

Exemplos

Incorreto — papel redundante causa erro de validação

<dialog role="dialog">
  <h2>Confirm action</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</dialog>

Correto — dependendo do papel implícito

<dialog>
  <h2>Confirm action</h2>
  <p>Are you sure you want to proceed?</p>
  <button>Cancel</button>
  <button>Confirm</button>
</dialog>

O elemento <dialog> expõe automaticamente role="dialog" na árvore de acessibilidade, portanto nenhum atributo explícito é necessário.

Correto — usando uma substituição de papel permitida

Se o diálogo representa um alerta urgente que requer interação imediata do utilizador, você pode substituir o papel com alertdialog:

<dialog role="alertdialog" aria-labelledby="alert-title" aria-describedby="alert-desc">
  <h2 id="alert-title">Session expiring</h2>
  <p id="alert-desc">Your session will expire in 60 seconds. Do you want to continue?</p>
  <button>Stay signed in</button>
</dialog>

Isto é válido porque alertdialog está explicitamente listado como um papel permitido para o elemento <dialog> na especificação ARIA in HTML. Note que aria-labelledby e aria-describedby são altamente recomendados para diálogos de alerta para que as tecnologias assistivas possam anunciar o título e a descrição adequadamente.