Accordion e tab JavaScript accessibili: codice da copiare | We.Inc
Un accordion in JavaScript vanilla con altezza animata e aria-expanded, e tab con tasti freccia e roving tabindex. Entrambi girano dal vivo nella pagina, con una checklist da tastiera e una tabella ARIA.
Un accordion accessibile usa un vero button dentro ogni intestazione, con aria-expanded che indica se il suo pannello è aperto e aria-controls che nomina il pannello. Le tab accessibili usano role=tablist, tab e tabpanel, con aria-selected, e si spostano tra le tab con i tasti freccia, tenendo nell'ordine del tasto Tab solo la tab selezionata. Entrambe le demo qui sotto girano dal vivo.
Quale usare
Usa
Quando
Accordion
Pagine lunghe di domande, dove le persone possono leggere più risposte
Tab
Poche viste della stessa cosa, lette una alla volta
details e summary
Semplice mostra e nascondi, senza alcun JavaScript
Ogni demo è un unico blocco autonomo di HTML, CSS e JavaScript. Modificalo e il risultato si riesegue. Poi metti da parte il mouse e provalo con la tastiera usando la checklist più in basso.
Copia nella tua pagina il blocco del componente che ti serve.
Cambia il testo, mantenendo ogni id unico nella pagina.
Prova con la tastiera: Tab, Enter, Space, le frecce, Home e End.
Prova con uno screen reader: dovrebbe dire espanso o compresso, oppure scheda 2 di 3.
Controlla la pagina con il movimento ridotto attivato; i pannelli dovrebbero aprirsi senza animazione.
Tieni il pulsante dentro l'intestazione invece di rendere cliccabile l'intestazione; le intestazioni non ricevono il focus e non annunciano lo stato.
Usa l'attributo hidden sui pannelli chiusi così i loro link non sono raggiungibili con Tab.
Non mettere tab dentro tab o accordion dentro tab; le persone perdono il senso di dove si trovano.
Se le risposte contano per la ricerca, lasciale nell'HTML (nascoste, non caricate dopo) così crawler e persone vedono lo stesso testo.
Domande frequenti
Le tab devono cambiare con i tasti freccia o con Enter?
La guida ARIA consente entrambe le cose. Cambiare mentre si muove la freccia (attivazione automatica) è la soluzione più rapida quando i pannelli sono già caricati. Se mostrare un pannello è lento, sposta il focus con le frecce e cambia invece con Enter o Space.
Come animo l'altezza di un accordion senza misurarla con JavaScript?
Rendi il pannello una griglia e applica una transizione a grid-template-rows da 0fr a 1fr, con un elemento interno che ha overflow hidden. Il browser calcola l'altezza al posto tuo.
Un elemento details è accessibile?
Sì. I browser espongono summary come un pulsante con stato espanso, e funziona con la tastiera senza configurazioni. Stilizzare l'indicatore e animarlo è più difficile, ed è per questo che molti siti costruiscono ancora la propria versione.
Le risposte nascoste di un accordion contano per la SEO?
I contenuti presenti nell'HTML ma compressi vengono comunque scansionati. Tienili nel sorgente della pagina invece di caricarli al clic, e assicurati che la risposta visibile corrisponda a ciò che c'è nell'HTML.
Dove andare dopo
Se lavori in React, la nostra galleria di componenti ha un set di tab con sottolineatura scorrevole e un accordion per FAQ, entrambi con JSX da copiare. Per una sezione FAQ, aggiungi dati strutturati FAQPage corrispondenti solo se domande e risposte sono visibili nella pagina.
Errori comuni
Usare elementi div con gestori di clic come intestazioni dell'accordion. Non si raggiungono con Tab e gli screen reader non sanno che fanno qualcosa.
Mettere ogni tab nell'ordine del tasto Tab, costringendo chi usa la tastiera ad attraversarle tutte per arrivare al contenuto.
Dimenticare di aggiornare aria-expanded o aria-selected quando cambia lo stato, così lo screen reader comunica la cosa sbagliata.
Accordion
Accordion accessibile con altezza animata
Ogni intestazione contiene un vero button con aria-expanded e aria-controls. L'altezza si anima con una transizione delle righe della griglia, quindi non serve misurare scrollHeight. Provalo con Tab, Enter e Space.
Un solo pannello aperto alla volta
Quando si apre un pannello, chiudi qualsiasi altro pannello aperto. Rendilo facoltativo: chi confronta due risposte spesso le vuole entrambe aperte.
Alternativa senza JavaScript: details e summary
Gli elementi details nativi si aprono e chiudono senza script. Dare loro lo stesso attributo name li rende esclusivi nei browser attuali; quelli più vecchi ne permettono semplicemente più di uno aperto.
Tab
Tab con roving tabindex e tasti freccia
Solo la tab selezionata ha tabindex 0, quindi Tab entra una volta nell'elenco delle tab e poi passa al pannello. Le frecce destra e sinistra si spostano tra le tab, Home e End saltano agli estremi.
Checklist di tastiera e ARIA
Test da tastiera: prova ciascuno nelle demo
Tasto
Accordion
Tab
Tab
Passa al pulsante di intestazione successivo
Entra nell'elenco delle tab sulla tab selezionata, poi passa al pannello
Shift + Tab
Passa al pulsante di intestazione precedente
Esce all'indietro dall'elenco delle tab
Enter o Space
Apre o chiude il pannello con il focus
Seleziona la tab con il focus (serve solo con l'attivazione manuale)