Accordion

Husk på

• Ved tastaturnavgiering, skal man kunne bruke Tab og Shift + Tab for å navigere mellom accordionradene.

• Ved tastaturnavigering, skal man kunne åpne og lukke en accordionrad ved å trykke Enter eller Space.

• Ved tastaturnavigering, skal fokus flyttes og markeres med god kontrast og passende stilendringer.

• Ved valgt/åpnet accordionrad, skal raden markeres tydelig.

Bør du unngå accordion?

Før Accordion taes i bruk, kan det være greit å tenke seg litt om. Med Accordion får man muligheten til å skjule informasjon, og vise brukeren informasjonen gradvis. Dette kan være en god løsning for å skape en ryddig og oversiktlig informasjon hvor de direkte kan velge hva de ønsker å lese mer om. Accordion bør forøvrig aldri brukes til å skjule viktig informasjon brukeren alltid bør få med sessionStorage. Et eksempel på en kontekst Accordion passer godt til er en “Ofte stilte spørsmål”-kontekst.

Er Punkt sin Accordion tilgjengelig nok?

I Punkt sin Accordion-komponent har vi valgt å bruke HTML-elementene <details> og <summary>. Dette er fordi disse elementene er semantiske og tilgjengelige i seg selv. Når man først leser om Accordion på internett refereres det ofte til en test gjort av Haskall i 2019 som argumentasjon for å bruke andre alternativer (ofte buttons wrappet i headings som f.eks. WAI-ARIA sin Accordion Pattern Dette er fordi <details> og <summary>-elementene har hatt dårlig støtte i enkelte skjermlesere tidligere. Dette er noe som har blitt, og blir bedre med tiden. I dag er støtten god nok til at vi kan bruke disse elementene.