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

Acerca de este problema HTML

El elemento <summary> sirve como el botón de revelación clicable para un elemento <details>. Debido a que su comportamiento integrado es inherentemente interactivo — hacer clic en él expande o colapsa el contenido del <details> padre — la especificación HTML le asigna un rol implícito de button. Esto significa que las tecnologías de asistencia como los lectores de pantalla ya anuncian <summary> como un botón sin necesidad de marcado adicional.

Cuando añades explícitamente role="button" a un elemento <summary>, el validador de W3C lo marca como innecesario. Aunque esto no causa problemas funcionales, los roles ARIA redundantes están desaconsejados por la primera regla del uso de ARIA: si un elemento HTML ya tiene la semántica que necesitas, no la vuelvas a añadir con atributos ARIA. Los roles redundantes añaden ruido a tu código, pueden confundir a otros desarrolladores haciéndoles pensar que se está aplicando un comportamiento personalizado, y en casos extremos pueden interactuar de manera inesperada con ciertas tecnologías de asistencia.

Este principio se aplica ampliamente — muchos elementos HTML tienen roles implícitos (por ejemplo, <nav> tiene navigation, <main> tiene main, <button> tiene button). Añadir el rol que ya llevan siempre es innecesario.

Cómo solucionarlo

Elimina el atributo role="button" del elemento <summary>. No se necesita reemplazo ya que la semántica ya está incorporada.

Ejemplos

❌ Incorrecto: `role="button"` redundante en `<summary>`

<details>
  <summary role="button">Show more information</summary>
  <p>Here is the additional information that was hidden.</p>
</details>

El validador reportará: El rol “button” es innecesario para el elemento “summary”.

✅ Correcto: `<summary>` sin un rol explícito

<details>
  <summary>Show more information</summary>
  <p>Here is the additional information that was hidden.</p>
</details>

El rol implícito de button del elemento <summary> asegura que las tecnologías de asistencia ya lo traten como un control interactivo. No se requieren atributos adicionales.

✅ Correcto: un ejemplo más completo de `<details>`

<details>
  <summary>I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?</summary>
  <p>A keyboard.</p>
</details>

Hacer clic en el <summary> alterna el elemento <details> padre entre sus estados abierto y cerrado. Los lectores de pantalla lo anuncian como un botón automáticamente, y los usuarios de teclado pueden activarlo con <kbd>Enter</kbd> o <kbd>Space</kbd> — todo sin necesidad de ningún rol ARIA explícito.