Componente Toggle Acessível a Leitores de Tela

Implementar um toggle básico em JavaScript é simples, mas garantir acessibilidade — com atributos ARIA corretos, controle de foco e navegação por teclado — geralmente exige mais código e atenção.

Este componente simplifica isso fornecendo uma estrutura HTML enxuta e a lógica necessária para toggles acessíveis com efeito sanfona.

Demo

Inspecione os elementos abaixo para entender o que o componente faz:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan pretium turpis vel aliquet. Nunc rhoncus tellus vel porta volutpat. Maecenas vitae dui lacinia, porttitor mi efficitur, fermentum velit. Praesent ullamcorper neque sit amet tortor dictum pretium. Etiam eget feugiat nunc, non aliquet nulla. Suspendisse in eros eget neque consectetur vulputate a a est. Vestibulum in mauris suscipit, pretium lectus vel, aliquet elit.

Proin auctor pretium felis id lacinia. Curabitur facilisis in est quis commodo. Fusce ac dictum ante. Donec sagittis nulla at tortor dapibus, quis eleifend velit hendrerit. Nam vitae leo et ipsum viverra fermentum. Donec consequat arcu eu vulputate venenatis. Morbi eu turpis nunc. Fusce aliquet arcu sed vulputate tempor. Sed venenatis odio eget leo euismod, a pharetra tortor sodales.

Proin vestibulum lacinia sem at laoreet.
Quisque tristique libero metus, in pellentesque ex molestie at.
Maecenas laoreet congue lorem nec varius. Integer aliquam luctus lobortis.
Aliquam ullamcorper neque lacus, ac rhoncus tellus placerat sed.
Mauris in nibh ex. Mauris bibendum varius urna vitae sodales.

Proin vestibulum lacinia sem at laoreet.
Quisque tristique libero metus, in pellentesque ex molestie at.
Maecenas laoreet congue lorem nec varius. Integer aliquam luctus lobortis.
Aliquam ullamcorper neque lacus, ac rhoncus tellus placerat sed.
Mauris in nibh ex. Mauris bibendum varius urna vitae sodales.

Proin vestibulum lacinia sem at laoreet.
Quisque tristique libero metus, in pellentesque ex molestie at.
Maecenas laoreet congue lorem nec varius. Integer aliquam luctus lobortis.
Aliquam ullamcorper neque lacus, ac rhoncus tellus placerat sed.
Mauris in nibh ex. Mauris bibendum varius urna vitae sodales.

CSS

Adicione o arquivo css ou scss base no seu projeto.


<link rel="stylesheet" href="https://thavilang.github.io/toggle-acessivel/toggle.min.css">

JavaScript

Adicione o código JS no seu projeto


<script src="https://thavilang.github.io/toggle-acessivel/toggle.min.js"></script>

Estrutura HTML

Adicione o atributo js-toggle ao container que agrupa os botões e os conteúdos que serão controlados:

Não utilize id's nos itens dentro do container, o script irá seta-los randomicamente

Não coloque margins ou paddings na div toggle, isso pode afetar o cálculo de altura do elemento. Utilize um container interno como no exemplo (.sua-classe-custom).


<div js-toggle>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <div class="sua-classe-custom">
            <!-- Conteúdo que será expandido/recolhido -->
        </div>
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <div class="sua-classe-custom">
            <!-- Conteúdo que será expandido/recolhido -->
        </div>
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <div class="sua-classe-custom">
            <!-- Conteúdo que será expandido/recolhido -->
        </div>
    </div>
</div>

Opcional

Você pode adicionar a classe ativo em um dos seus botões para que o toggle comece com um item já visível. Ex:


<div js-toggle>
    <button class="ativo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
            <!-- Conteúdo que será expandido/recolhido -->
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <!-- Conteúdo que será expandido/recolhido -->
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <!-- Conteúdo que será expandido/recolhido -->
    </div>
</div>

Você pode adicionar o valor no-auto-close no js-toggle para que um item não feche automaticamente quando outro é aberto. Ex:


<div js-toggle="no-auto-close">
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <!-- Conteúdo que será expandido/recolhido -->
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <!-- Conteúdo que será expandido/recolhido -->
    </div>
    <button>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</button>
    <div>
        <!-- Conteúdo que será expandido/recolhido -->
    </div>
</div>

Observações

As versões minificadas facilitam a implementação rápida, mas os arquivos não minificados são pequenos e podem ser facilmente personalizados.

Se desejar contribuir com o projeto, fique à vontade para enviar um pull request. Este código é de uso livre e tem como objetivo simplificar a implementação de recursos de acessibilidade. Ao contribuir, você ajuda a tornar a web mais acessível para todos. :)