O resumo deve ter texto discernível

O elemento <summary> serve como um widget de divulgação incorporado em HTML. Funciona como um botão: os utilizadores clicam ou ativam-no para expandir ou colapsar o conteúdo associado <details>. Como é um controlo interativo, deve comunicar o seu propósito a todos os utilizadores, incluindo aqueles que dependem de tecnologia assistiva.

Quando um elemento <summary> não tem um nome acessível — por exemplo, quando está vazio ou contém apenas um elemento não textual sem uma alternativa — os leitores de ecrã anunciam-no como algo genérico como “triângulo de divulgação” ou simplesmente “botão” sem etiqueta. Isto deixa os utilizadores cegos e surdocegos incapazes de compreender o que o controlo faz ou que informação revela. Podem saltá-lo completamente, perdendo conteúdo potencialmente importante.

Esta regra mapeia para WCAG 2.0, 2.1, e 2.2 Critério de Sucesso 4.1.2: Nome, Função, Valor (Nível A), que exige que todos os componentes da interface do utilizador tenham um nome programaticamente determinável. Também se aplica sob Seção 508, diretrizes Trusted Tester, e EN 301 549 (9.4.1.2). O impacto no utilizador é considerado sério porque bloqueia diretamente o acesso ao conteúdo para utilizadores de tecnologia assistiva.

Como corrigir

A abordagem mais simples e fiável é colocar texto descritivo diretamente dentro do elemento <summary>. Este texto deve indicar claramente o tópico ou propósito do conteúdo oculto.

Se o elemento <summary> não pode conter texto visível — por exemplo, quando usa uma imagem de fundo CSS ou um ícone — pode fornecer um nome acessível oculto usando um destes métodos:

• aria-label: Forneça o nome acessível diretamente como um valor de atributo.
• aria-labelledby: Aponte para o id de outro elemento que contenha o texto do nome acessível.
• title: Forneça uma dica de ferramenta que também serve como nome acessível. Note que title é a opção menos fiável, pois não é consistentemente exposta em todas as tecnologias assistivas.

Note que a regra summary-name é separada da regra button-name porque os elementos <summary> têm semânticas inerentes diferentes dos elementos <button>, mesmo que ambos sejam controlos interativos.

Exemplos

Falha: elemento <summary> vazio

Este <summary> não tem texto ou nome acessível, então os leitores de ecrã não podem transmitir o seu propósito.

<details>
  <summary></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Falha: <summary> com apenas um elemento não textual e sem alternativa

A imagem dentro do <summary> não tem texto alt, então ainda não há nome acessível.

<details>
  <summary>
    <img src="info-icon.png">
  </summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passa: <summary> com texto visível

A correção mais direta — coloque texto claro e descritivo dentro do <summary>.

<details>
  <summary>Return policy</summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passa: <summary> com uma imagem que tem texto alt

Quando usar uma imagem dentro de <summary>, o atributo alt fornece o nome acessível.

<details>
  <summary>
    <img src="info-icon.png" alt="Return policy">
  </summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passa: <summary> com aria-label

Quando o texto visível não é viável, aria-label fornece um nome acessível oculto.

<details>
  <summary aria-label="Return policy"></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Passa: <summary> com aria-labelledby

O atributo aria-labelledby referencia outro elemento que contém o texto do nome.

<span id="return-heading" hidden>Return policy</span>
<details>
  <summary aria-labelledby="return-heading"></summary>
  <p>Returns must be initiated within 30 days of purchase.</p>
</details>

Learn more:

Deque Reference

Deque University - How To Fix

→