Accordion

Om komponenten

Accordion lar brukeren vise og skjule innhold i ulike seksjoner ved å klikke på overskriftene.

Egnet til:

• Å strukturere store mengder informasjon, som for eksempel i en FAQ.
• Å forkorte sider og redusere unødvendig scrolling når innholdet ikke må leses i i sin helhet, eller når plassen er begrenset, som på et mobilgrensesnitt.

Uegnet til:

• Annen vilkårlig funksjonalitet der innhold skal kunne skjules og vises. Bruk heller Disclosure til dette
• Viktig informasjon som bruker enkelt må finne.
• Små mengder informasjon.

Varianter

Retningslinjer

Innholdet i en Accordion bør ha en relasjon til hverandre. Det gjør det lettere for bruker å finne fram til relevant informasjon, og enklere for redaktør å skille innhold fra hverandre.

Dersom det er flere temaer, så bryt opp med flere seksjoner for å sikre at man ikke får for lange tekster, eller at innholdet ikke oppleves som relevant for overskriften.

Innhold liggende i en Accordion har lett for å bli oversett. Pass derfor på at innhold avgjørende for bruker ikke ligger gjemt.

Dersom det er mye informasjon som skal fortelles, så vurder å heller lage en egen side fremfor å gjemme det i en Accordion.

Unngå å kun bruke én accordion

Unngå lange overskrifter med flere temaer

Formatering

Anatomi

1. Header Overskriften i accordion, hold denne kort og konsis
2. Ikon Viser om Accordion er åpen eller lukket
3. Panel Der innholdet knyttet til headeren ligger

Universell utforming

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.

Sjekkliste

✓ Kort og konsis overskrift i Accordion
✓ Overordnet overskrift har samme id som i ariaLabelledBy-prop i Accordion

Les mer

WAI-ARIA Accordion pattern

WCAG 1.3.1 Info and Relationships (A)

WCAG 3.2.4 Consistant Identification (AA)