English
EspañolGerador de abas (tabs) acessíveis
Escreva o título e o conteúdo de cada aba, escolha o estilo e copie. A prévia pode ser testada com o mouse e com as setas do teclado.
Abas que funcionam no teclado
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de abas (tabs) acessíveis: para que serve
Abas organizam conteúdos como descrição, medidas e entrega de um produto num espaço pequeno. Feitas sem cuidado, ficam impossíveis de usar pelo teclado ou pelo leitor de tela.
O gerador segue o padrão Tabs do WAI-ARIA Authoring Practices: tablist, tab com aria-selected e tabpanel ligados por aria-controls e aria-labelledby, só a aba ativa no Tab e navegação com as setas, Home e End. Os painéis só são escondidos quando o script carrega. Você escolhe o estilo sublinhado ou em pílula e a cor.
Como usar
- Escreva o título e o conteúdo de cada aba.
- Escolha o estilo e a cor.
- Teste na prévia e copie o código.
Quando usar
- Detalhes de produto em loja virtual.
- Planos ou serviços lado a lado.
- Informações de um evento.
Perguntas frequentes
O que torna as abas acessíveis?
Seguir o padrão Tabs do WAI-ARIA: a lista tem role=tablist, cada aba é um botão com role=tab e aria-selected, e cada conteúdo tem role=tabpanel ligado à aba por aria-controls e aria-labelledby. Só a aba ativa entra no Tab; entre as abas a pessoa anda com as setas.
E se o JavaScript não carregar?
O código só esconde os painéis depois que o script roda. Sem JavaScript, todos os conteúdos aparecem um embaixo do outro, e nada fica inacessível.
Abas ou acordeão?
Abas funcionam bem com poucos títulos curtos no computador. Com muitos itens ou textos longos, especialmente no celular, o acordeão (perguntas que abrem e fecham) costuma ser melhor.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.