Acordeões Mal Feitos: Quando HTML Perde O Sentido
Acordeões mal construídos não são só um erro estético - eles sabotam acessibilidade e confusão os usuários. Nos sites municipais, muitos recorrem a divs no lugar de elementos nativos como <details> ou <button>, transformando botões interativos em imagens sem função. Esse jogo de mímica confunde leitores de tela e prejudica a navegação. Por exemplo, no site da CAM de Bragança, um acordeão aparece como:
Sem a semântica correta, tecnologias assistivas não reconhecem o acordeão como um elemento interativo. O usuário não sabe se está aberto ou fechado, e o conteúdo oculto permanece invisível até o clique, muitas vezes sem feedback visual. Isso quebra a experiência, especialmente para quem depende de navegação por teclado ou leitores de tela.
Aqui está o certo caminho: cada acordeão deve usar <details> e <summary> nativos, que já trazem a funcionalidade e acessibilidade embutidas. Quando usar <div>, implemente aria-expanded dinamicamente com JavaScript para comunicar o estado. Essa pequena mudança melhora não só o acesso, mas também o SEO - motores entendem melhor o conteúdo semântico.
Practicamente, não se trata apenas de estética. É sobre respeito: um site que não se comunica corretamente exclui parte da população. Ou se pergunta: um acordeão que não se expande corretamente está realmente atendendo o cidadão?
Até hoje, alguns municípios avançaram com boas práticas - CM de Guimarães e Matosinhos, por exemplo, usam estruturas acessíveis com clara indicação de estado. Mas muitos ainda dividem o problema em péssimas escolhas técnicas. O elefante na sala é simples: um div não é um botão. E isso mata usabilidade.
A próxima vez que ver um acordeão, pergunte: está usando <details>? Se não, está sacrificando acessibilidade. A semântica HTML é segurança - e para o público digital, é obrigatória.
