Componente tab con :checked a confronto con JS

Un componente tab richiede: un indicatore visivo della tab attiva, il pannello associato mostrato o nascosto al momento della selezione, la navigazione da tastiera tra le tab e attributi ARIA accessibili. Questi requisiti possono essere soddisfatti con il solo CSS usando il trucco :checked oppure con JavaScript per una migliore accessibilità.

Gli input radio nascosti fungono da stato: ogni tab è una <label> collegata a un input radio. Quando un radio è selezionato, i combinatori di fratelli CSS mostrano il pannello corrispondente e applicano lo stile all'etichetta della tab attiva. Non è necessario alcun JavaScript.

Inserisca gli input radio, poi tutte le etichette, cioè le tab, e infine tutti i pannelli nello stesso contenitore. Usi il combinatore di fratelli generico (~) per collegare un radio selezionato al pannello corrispondente. I pannelli hanno inizialmente display: none; quello corrispondente riceve display: block.

Il trucco :checked non può aggiornare gli attributi ARIA (aria-selected, aria-controls), non può abilitare la navigazione tra le tab con i tasti freccia e i vincoli sull'ordine del DOM, con gli input prima dei pannelli, possono entrare in conflitto con i requisiti del design visivo. Queste lacune limitano la reale accessibilità.

Un componente tab in JS ascolta gli eventi di clic sui pulsanti delle tab, imposta aria-selected sulla tab attiva, aggiorna aria-hidden sui pannelli e gestisce il focus. Questo approccio consente la piena conformità ad ARIA e i pattern d'interazione da tastiera definiti dalle ARIA Authoring Practices.

Usi role="tablist" sul contenitore, role="tab" su ogni pulsante tab con aria-selected e aria-controls, e role="tabpanel" su ogni pannello con aria-labelledby. I lettori di schermo annunciano il numero di tab, la posizione e lo stato di selezione.

ARIA Authoring Practices per le tab: il tasto Tab entra nel tablist e porta il focus sulla tab attiva. Freccia sinistra/destra sposta il focus tra le tab. Home/End passa alla prima o all'ultima tab. Ogni spostamento con i tasti freccia attiva la tab focalizzata, secondo il pattern di attivazione automatica.

Definisca lo stile della tab attiva con un bordo inferiore o una modifica dello sfondo usando il selettore [aria-selected="true"], che funziona sia con l'approccio JS sia con quello :checked. In questo modo il CSS rimane sincronizzato con l'attributo di stato ARIA, evitando di gestire due stati distinti.

Un indicatore animato delle schede scorre da una scheda all'altra: posizioni un elemento indicatore con posizionamento assoluto, utilizzi JavaScript per impostarne la posizione left e la larghezza in base alle dimensioni della scheda attiva e lo animi con transition: left 200ms ease, width 200ms ease.

Quando le schede superano la larghezza del contenitore sugli schermi piccoli, utilizzi lo scorrimento orizzontale (overflow-x: auto; scrollbar-width: none) oppure le raggruppi in un menu a discesa di tipo select sui dispositivi mobili. L'approccio con select richiede JavaScript per sincronizzare il select nativo con la visibilità del pannello della scheda.

Utilizzi l'hack :checked per interfacce semplici e non critiche, dove l'accessibilità non rappresenta un vincolo prioritario. Utilizzi schede JavaScript per qualsiasi interfaccia di produzione destinata a utenti da tastiera, utenti di screen reader o applicazioni che devono rispettare la conformità ARIA durante gli audit o per requisiti legali.

Qual è il principale limite di accessibilità dell'hack CSS :checked per le schede?

L'hack :checked consente di cambiare scheda usando solo CSS, tramite input radio e combinatori tra fratelli, ma non offre il supporto ARIA né un'accessibilità completa da tastiera. Le schede JavaScript con ruoli ARIA (tablist, tab, tabpanel), gestione di aria-selected e supporto ai tasti freccia forniscono l'esperienza completa e accessibile richiesta dai componenti di produzione.