Verificação HTML: O atributo "button" é desnecessário para o elemento "summary".

Sobre este problema HTML

O elemento <summary> funciona como o botão clicável de revelação para um elemento <details>. Devido ao seu comportamento integrado ser inerentemente interativo — clicar nele expande ou recolhe o conteúdo do <details> pai — a especificação HTML atribui-lhe um atributo button implícito. Isto significa que as tecnologias assistivas como os leitores de ecrã já anunciam o <summary> como um botão sem qualquer marcação adicional.

Quando você adiciona explicitamente role="button" a um elemento <summary>, o validador W3C sinaliza-o como desnecessário. Embora isto não cause problemas funcionais, os atributos ARIA redundantes são desencorajados pela primeira regra de uso ARIA: se um elemento HTML já tem a semântica de que você precisa, não a volte a adicionar com atributos ARIA. Os atributos redundantes adicionam ruído ao seu código, podem confundir outros programadores levando-os a pensar que está a ser aplicado comportamento personalizado, e em casos extremos podem interagir de forma inesperada com certas tecnologias assistivas.

Este princípio aplica-se amplamente — muitos elementos HTML têm atributos implícitos (por exemplo, <nav> tem navigation, <main> tem main, <button> tem button). Adicionar o atributo que eles já possuem é sempre desnecessário.

Como corrigir

Remova o atributo role="button" do elemento <summary>. Não é necessária nenhuma substituição, uma vez que a semântica já está integrada.

Exemplos

❌ Incorreto: `role="button"` redundante no `<summary>`

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

O validador reportará: The “button” role is unnecessary for element “summary”.

✅ Correto: `<summary>` sem um atributo explícito

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

O atributo button implícito do elemento <summary> assegura que as tecnologias assistivas já o tratam como um controlo interativo. Não são necessários atributos adicionais.

✅ Correto: um exemplo mais 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>

Clicar no <summary> alterna o elemento <details> pai entre os seus estados aberto e fechado. Os leitores de ecrã anunciam-no como um botão automaticamente, e os utilizadores de teclado podem ativá-lo com <kbd>Enter</kbd> ou <kbd>Space</kbd> — tudo isto sem qualquer atributo ARIA explícito.