Validación HTML: El rol "dialog" es innecesario para el elemento "dialog".

Acerca de este problema HTML

El elemento <dialog> fue introducido para proporcionar una forma nativa de crear cuadros de diálogo modales y no modales en HTML. Como se define en el estándar WHATWG HTML Living Standard y la especificación ARIA in HTML, cada elemento <dialog> lleva automáticamente un rol dialog implícito. Esto significa que las tecnologías de asistencia como los lectores de pantalla ya lo reconocen como un diálogo sin ningún marcado ARIA adicional.

Cuando añades explícitamente role="dialog" a un elemento <dialog>, estás repitiendo lo que el navegador y las tecnologías de asistencia ya saben. Esto viola la primera regla del uso de ARIA: no uses ARIA si puedes usar un elemento HTML nativo o un atributo con la semántica ya incorporada. Aunque esta redundancia no romperá la funcionalidad, desordena tu marcado y señala a otros desarrolladores (y validadores) que el autor puede no entender la semántica incorporada del elemento.

Este principio se aplica ampliamente en HTML. Muchos elementos tienen roles ARIA implícitos — <nav> tiene navigation, <main> tiene main, <button> tiene button, y así sucesivamente. Añadir el rol correspondiente explícitamente a cualquiera de estos elementos produce una advertencia de validador similar.

Cómo solucionarlo

Simplemente elimina el atributo role="dialog" del elemento <dialog>. La semántica incorporada maneja todo automáticamente. Si necesitas proporcionar contexto adicional para las tecnologías de asistencia, considera usar aria-label o aria-labelledby para dar al diálogo un nombre accesible descriptivo — esa es información suplementaria genuinamente útil en lugar de un rol redundante.

Ejemplos

Incorrecto: 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>

Esto desencadena la advertencia del validador porque role="dialog" duplica el rol implícito del elemento <dialog>.

Correcto: confiando en la 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>

Correcto: añadiendo un nombre accesible descriptivo

<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 asociar el diálogo con su encabezado es una mejora significativa — le da al diálogo un nombre accesible que los lectores de pantalla anuncian cuando se abre el diálogo. Este es el tipo de uso de ARIA que genuinamente mejora la accesibilidad, en contraposición a reiterar redundantemente el rol del elemento.