Il pattern delle schede: tablist, tab, tabpanel
Collegare i tre ruoli necessari a un gruppo di schede
Il pattern delle schede: tablist, tab, tabpanel è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Che cos'è davvero un insieme di schede
Un tab set mostra un pannello alla volta e consente agli utenti di passare da uno all'altro. Per le tecnologie assistive deve apparire come un unico widget, non come link slegati.
Tre ruoli collaborano
Il modello si basa su tre ruoli ARIA: un tablist che contiene le schede, ogni scheda e il pannello che ciascuna scheda mostra. Li imposti tutti correttamente.
Il contenitore è un tablist
Racchiuda la riga di schede in un elemento con role="tablist". In questo modo comunica agli screen reader che gli elementi contenuti sono un insieme correlato di schede.
<div role="tablist">...</div>Ogni scheda è un pulsante
Crei ogni scheda a partire da un vero button con role="tab". Un pulsante è già focalizzabile e cliccabile, quindi evita configurazioni aggiuntive.
<button role="tab">Profile</button>Il pannello è un tabpanel
Al contenuto mostrato da ogni scheda assegni role="tabpanel". Questo lo identifica come la regione controllata dalla scheda attualmente selezionata.
<div role="tabpanel">Profile details</div>Contrassegnare la scheda selezionata
Imposti aria-selected="true" sulla scheda attiva e false sulle altre. Gli screen reader annunceranno quale scheda è attualmente selezionata.
<button role="tab" aria-selected="true">Profile</button>Collegare la scheda al relativo pannello
Colleghi ogni scheda al relativo pannello tramite aria-controls, impostandolo sull'id del pannello. Gli utenti capiranno quale regione apre la scheda.
<button role="tab" aria-controls="p1">Profile</button>Dare al pannello il nome della scheda
Assegni al pannello un aria-labelledby che punti alla scheda corrispondente. In questo modo il pannello utilizza il testo della scheda come nome accessibile.
<div role="tabpanel" aria-labelledby="tab1">...</div>Nascondere i pannelli inattivi
Deve essere visibile un solo pannello alla volta. Aggiunga l'attributo hidden ai pannelli la cui scheda non è selezionata, così verranno rimossi dalla pagina.
<div role="tabpanel" hidden>...</div>Assegnare un'etichetta al tablist
Un tablist deve avere un aria-label che ne descriva lo scopo, ad esempio Account settings. Gli utenti capiranno a cosa serve l'intero insieme di schede.
<div role="tablist" aria-label="Account settings">...</div>Come viene annunciato
Insieme, uno screen reader annuncia qualcosa come Profile, tab, selected, 1 of 3. Questo orientamento è proprio ciò che rende utilizzabili le schede.
Verifica rapida
Sta configurando il contenitore che racchiude la riga di schede. Quale ruolo deve avere?
Riepilogo: il modello delle schede
Ha imparato la triade tablist, tab, tabpanel. Contrassegni la scheda selezionata, colleghi ogni scheda al relativo pannello e nasconda quelle inattive.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Il pattern delle schede: tablist, tab, tabpanel» è gratuita?
Sì — il testo completo di «Il pattern delle schede: tablist, tab, tabpanel» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Il pattern delle schede: tablist, tab, tabpanel»?
Collegare i tre ruoli necessari a un gruppo di schede Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Il pattern delle schede: tablist, tab, tabpanel»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Il pattern delle schede: tablist, tab, tabpanel
- Navigare tra le schede con i tasti freccia
- Accordion con button e aria-expanded
- Disclosure o schede: scegliere quello giusto