Toegankelijke JavaScript-accordeon en tabs: code om te kopiëren | We.Inc
Een accordeon in vanilla JavaScript met geanimeerde hoogte en aria-expanded, en tabs met pijltjestoetsen en roving tabindex. Beide draaien live op de pagina, met een toetsenbordchecklist en een ARIA-tabel.
Een toegankelijke accordeon gebruikt een echte button in elke kop, met aria-expanded die aangeeft of het paneel open is en aria-controls die het paneel benoemt. Toegankelijke tabs gebruiken role=tablist, tab en tabpanel, met aria-selected, en wisselen tussen tabs met de pijltjestoetsen, waarbij alleen de geselecteerde tab in de Tab-volgorde blijft. Beide demo's hieronder draaien live.
Welke u gebruikt
Gebruik
Wanneer
Accordeon
Lange pagina's met vragen, waar mensen mogelijk meerdere antwoorden lezen
Tabs
Een paar weergaven van hetzelfde, één tegelijk gelezen
details en summary
Eenvoudig tonen en verbergen zonder enig JavaScript
Elke demo is één opzichzelfstaand blok HTML, CSS en JavaScript. Bewerk het en het resultaat draait opnieuw. Leg daarna uw muis weg en test het met het toetsenbord aan de hand van de checklist verderop.
Kopieer het blok voor het component dat u nodig hebt naar uw pagina.
Wijzig de tekst en houd elke id uniek op de pagina.
Test met het toetsenbord: Tab, Enter, Space, de pijltjes, Home en End.
Test met een schermlezer: die moet uitgevouwen of samengevouwen zeggen, of tab 2 van 3.
Controleer de pagina met minder beweging ingeschakeld; de panelen moeten openen zonder animatie.
Houd de button binnen de kop in plaats van de kop klikbaar te maken; koppen kunnen geen focus krijgen en melden geen toestand.
Gebruik het hidden-attribuut op gesloten panelen, zodat hun links niet met Tab bereikbaar zijn.
Zet geen tabs in tabs of accordeons in tabs; mensen raken kwijt waar ze zijn.
Zijn de antwoorden belangrijk voor zoekmachines, laat ze dan in de HTML staan (verborgen, niet later geladen), zodat crawlers en mensen dezelfde tekst zien.
Veelgestelde vragen
Moeten tabs wisselen bij een pijltjestoets of bij Enter?
De ARIA-gids staat beide toe. Wisselen terwijl de pijl beweegt (automatische activering) voelt het snelst als panelen al geladen zijn. Is het tonen van een paneel traag, verplaats de focus dan met de pijltjes en wissel pas bij Enter of Space.
Hoe animeer ik de hoogte van een accordeon zonder dat JavaScript meet?
Maak van het paneel een grid en laat grid-template-rows overgaan van 0fr naar 1fr, met een binnenelement dat overflow hidden heeft. De browser rekent de hoogte voor u uit.
Is een details-element toegankelijk?
Ja. Browsers presenteren summary als een button met een uitgevouwen toestand, en het werkt meteen met het toetsenbord. De markering opmaken en animeren is lastiger, en daarom bouwen veel sites nog hun eigen versie.
Tellen verborgen accordeonantwoorden mee voor SEO?
Inhoud die in de HTML staat maar is samengevouwen, wordt nog steeds gecrawld. Houd haar in de paginabron in plaats van haar bij een klik te laden, en zorg dat het zichtbare antwoord overeenkomt met wat in de HTML staat.
Waar u daarna heen kunt
Werkt u in React, dan heeft onze componentengalerij een set tabs met een schuivende onderstreping en een FAQ-accordeon, beide met JSX om te kopiëren. Voeg bij een FAQ-sectie alleen bijpassende FAQPage-gestructureerde gegevens toe als de vragen en antwoorden zichtbaar op de pagina staan.
Veelgemaakte fouten
div-elementen met klikhandlers gebruiken als accordeonkoppen. Ze zijn niet met Tab bereikbaar en schermlezers weten niet dat ze iets doen.
Elke tab in de Tab-volgorde zetten, waardoor toetsenbordgebruikers ze allemaal langs moeten om bij de inhoud te komen.
Vergeten aria-expanded of aria-selected bij te werken als de toestand verandert, zodat de schermlezer het verkeerde meldt.
Accordeon
Toegankelijke accordeon met geanimeerde hoogte
Elke kop bevat een echte button met aria-expanded en aria-controls. De hoogte animeert met een overgang op de grid-rijen, dus scrollHeight hoeft niet te worden gemeten. Probeer het met Tab, Enter en Space.
Maar één paneel tegelijk open
Gaat een paneel open, sluit dan elk ander open paneel. Houd dit optioneel: mensen die twee antwoorden vergelijken willen vaak beide open hebben.
Terugvaloptie zonder JavaScript: details en summary
Native details-elementen openen en sluiten zonder script. Geeft u ze hetzelfde name-attribuut, dan sluiten ze elkaar uit in huidige browsers; oudere browsers laten er gewoon meerdere open.
Tabs
Tabs met roving tabindex en pijltjestoetsen
Alleen de geselecteerde tab heeft tabindex 0, dus Tab gaat één keer de tablijst in en daarna door naar het paneel. Pijl naar links en rechts wisselen tussen tabs, Home en End springen naar de uiteinden.
Checklist voor toetsenbord en ARIA
Toetsenbordtest: probeer elke toets in de demo's
Toets
Accordeon
Tabs
Tab
Gaat naar de volgende kopbutton
Gaat de tablijst in op de geselecteerde tab en daarna naar het paneel
Shift + Tab
Gaat naar de vorige kopbutton
Gaat terug uit de tablijst
Enter of Space
Opent of sluit het paneel met focus
Selecteert de tab met focus (alleen nodig bij handmatige activering)
Pijl rechts / links
Niet vereist
Volgende / vorige tab, rondlopend
Home / End
Optioneel: eerste / laatste kop
Eerste / laatste tab
ARIA-overzicht
Attributen die elk onderdeel nodig heeft
Element
Accordeon
Tabs
Trigger
button binnen een kop, aria-expanded, aria-controls
role=tab, aria-selected, aria-controls, tabindex 0 of -1
Container
Niets vereist
role=tablist met aria-label
Paneel
id; role=region met aria-labelledby is optioneel
role=tabpanel, aria-labelledby, tabindex 0 als het geen focusbare inhoud heeft