Acordeões com Button e aria-expanded

Um acordeão é um conjunto de títulos que se expandem e recolhem para revelar conteúdo. Cada seção pode ser aberta individualmente, ao contrário das abas.

Transforme cada cabeçalho do acordeão em um botão de verdade. Botões podem receber foco, funcionam com Enter e Espaço e são anunciados gratuitamente por leitores de tela.

Tenha cuidado com um div clicável usado como cabeçalho. Ele não pode receber foco, ignora o teclado e não informa à tecnologia assistiva qual é sua função.

Adicione aria-expanded ao botão para que os leitores de tela anunciem se ele está recolhido ou expandido. Esse único estado é o que torna um acordeão acessível.

Quando o usuário ativa o botão, alterne aria-expanded entre true e false. Mantenha esse valor sincronizado com o fato de o painel estar realmente visível.

Use aria-controls no botão, definindo-o como o id do painel que ele abre. Assim, os usuários sabem qual conteúdo esse cabeçalho revela.

Quando uma seção estiver fechada, adicione o atributo hidden ao painel. Isso o remove da página e da árvore de acessibilidade até que seja reaberto.

Coloque cada botão dentro de um título real, como h3. Assim, usuários de leitores de tela podem passar de uma seção para outra usando a navegação por títulos.

Uma única área que mostra e oculta conteúdo é uma divulgação, não um conjunto de abas. Ela precisa apenas de um botão com aria-expanded, sem papéis de tablist ou tab.

Depois de alternar o estado, mantenha o foco no botão pressionado pelo usuário. Não mova o foco para o painel; isso surpreende usuários de teclado.

Como o botão traz seu próprio estado, o leitor de tela anuncia “expandido” ou “recolhido” todas as vezes. Os usuários sempre sabem o que acontecerá ao ativá-lo.

Você aprendeu que o cabeçalho de um acordeão é um botão com aria-expanded, envolvido por um título. Alterne o estado, aponte para o painel e oculte-o quando estiver fechado.