Generatore di tab accessibili
Scrivi il titolo e il contenuto di ogni tab, scegli lo stile e copia. L’anteprima si può provare con il mouse e con le frecce della tastiera.
Come si usaTab che funzionano con la tastiera
Disponibile in: 
Generatore di tab accessibili: a cosa serve
Le tab organizzano contenuti come descrizione, misure e consegna di un prodotto in uno spazio ridotto. Fatte senza cura, diventano impossibili da usare con la tastiera o con lo screen reader.
Il generatore segue il pattern Tabs delle WAI-ARIA Authoring Practices: tablist, tab con aria-selected e tabpanel collegati da aria-controls e aria-labelledby, solo la tab attiva nell’ordine del Tab e navigazione con frecce, Home e End. I pannelli vengono nascosti solo quando lo script si carica. Scegli lo stile sottolineato o a pillola e il colore.
Come si usa
- Scrivi il titolo e il contenuto di ogni tab.
- Scegli lo stile e il colore.
- Prova nell’anteprima e copia il codice.
Quando usarlo
- Dettagli di prodotto in un negozio online.
- Piani o servizi affiancati.
- Informazioni su un evento.
Domande frequenti
Cosa rende accessibili le tab?
Seguire il pattern Tabs di WAI-ARIA: la lista ha role=tablist, ogni tab è un pulsante con role=tab e aria-selected, e ogni contenuto ha role=tabpanel collegato alla tab con aria-controls e aria-labelledby. Solo la tab attiva riceve il focus con Tab; tra le tab ci si sposta con le frecce.
E se il JavaScript non si carica?
Il codice nasconde i pannelli solo dopo l’esecuzione dello script. Senza JavaScript, tutti i contenuti compaiono uno sotto l’altro e nulla resta inaccessibile.
Tab o fisarmonica?
Le tab funzionano bene con pochi titoli brevi sul computer. Con molti elementi o testi lunghi, soprattutto su cellulare, la fisarmonica (domande che si aprono e si chiudono) di solito è meglio.
È davvero gratis?
Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.