Validación HTML: Valor incorrecto "dialog" para el atributo "role" en el elemento "dialog".

Acerca de este problema HTML

La especificación HTML define un conjunto de roles ARIA implícitos (también llamados “semántica nativa”) para muchos elementos HTML. El rol implícito del elemento <dialog> es dialog, lo que significa que las tecnologías de asistencia como los lectores de pantalla ya lo anuncian correctamente sin necesidad de marcado ARIA explícito. Cuando añades role="dialog" a un elemento <dialog>, estás repitiendo lo que el navegador y el árbol de accesibilidad ya saben, y la especificación ARIA in HTML restringe explícitamente esto.

La especificación ARIA in HTML mantiene una lista de roles permitidos para cada elemento HTML. Para <dialog>, la única anulación de rol permitida es alertdialog (para diálogos que requieren una respuesta inmediata del usuario). Establecer role="dialog" no está listado como un valor permitido porque duplica la semántica nativa, y la especificación trata tal redundancia como un error de conformidad. Por eso el W3C Validator reporta: Valor incorrecto “dialog” para el atributo “role” en el elemento “dialog”.

Por qué esto importa

Cumplimiento de estándares: El W3C Validator aplica la especificación ARIA in HTML, que prohíbe asignaciones de roles redundantes en elementos que ya llevan ese rol implícitamente. El marcado válido asegura que tus páginas cumplan con los estándares web.
Claridad de accesibilidad: Aunque la mayoría de las tecnologías de asistencia manejan roles redundantes con elegancia hoy en día, los atributos ARIA innecesarios añaden ruido al código base y pueden causar confusión sobre si la semántica nativa del elemento está siendo intencionalmente anulada. La primera regla de ARIA es: no uses ARIA si un elemento HTML nativo ya proporciona la semántica que necesitas.
Mantenibilidad: Eliminar atributos redundantes mantiene tu HTML limpio y más fácil de mantener. Los desarrolladores futuros no tendrán que preguntarse si el rol explícito fue añadido intencionalmente para solucionar un error.

Cómo solucionarlo

Localiza cualquier elemento <dialog> con un atributo role="dialog".
Elimina el atributo role por completo.
Si necesitas que el diálogo se comporte como un diálogo de alerta (uno que interrumpe al usuario y exige atención inmediata), usa role="alertdialog" en su lugar; esta es la única anulación de rol permitida para <dialog>.

Ejemplos

Incorrecto — el rol redundante causa un error de validación

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

Correcto — confiando en el rol implícito

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

El elemento <dialog> expone automáticamente role="dialog" en el árbol de accesibilidad, por lo que no se necesita ningún atributo explícito.

Correcto — usando una anulación de rol permitida

Si el diálogo representa una alerta urgente que requiere interacción inmediata del usuario, puedes anular el rol con 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>

Esto es válido porque alertdialog está explícitamente listado como un rol permitido para el elemento <dialog> en la especificación ARIA in HTML. Ten en cuenta que aria-labelledby y aria-describedby son altamente recomendados para diálogos de alerta para que las tecnologías de asistencia puedan anunciar el título y la descripción correctamente.