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.
• Ved overordnet overskrift, skal det være tydelig at dette er et <heading>-element (f.eks. <h2> eller <h3>) og ha en unik id. Denne iden skal sendes inn til Accordion som ariaLabelledBy for å skape en relasjon mellom heading og komponenent. (Se kodeeksempel)

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.

Sjekkliste

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 buttonswrappet 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, og i dag er støtten god nok til at vi kan bruke disse elementene i kombinasjon av korrekt ARIA-labelling.