Eksempel på HTML-struktur:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Sektion 1 Titel
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Indhold for sektion 1 kommer her.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Sektion 2 Titel
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Indhold for sektion 2 kommer her.</p>
    </div>
  </div>
</div>

2. ARIA-attributter for dynamisk indhold

ARIA-roller og -tilstande er afgørende for at informere hjælpemiddelteknologier om accordion-widgettens adfærd.

• `role="button"`: På det interaktive element (knap), der skifter indhold.
• `aria-expanded`: Sat til `true`, når indholdspanelet er synligt, og `false`, når det er skjult. Dette kommunikerer direkte tilstanden til skærmlæsere.
• `aria-controls`: På knappen, der henviser til `id`'et for det indholdspanel, den styrer. Dette etablerer et programmatisk link.
• `aria-labelledby`: På indholdspanelet, der henviser til `id`'et for den knap, der styrer det. Dette skaber et tovejslink.
• `role="region"`: På indholdspanelet. Dette indikerer, at indholdet er en opfattelig sektion af siden.
• `aria-hidden`: Mens `aria-expanded` foretrækkes til at styre synlighedstilstande, kan `aria-hidden="true"` bruges på indholdspaneler, der ikke aktuelt vises, for at forhindre dem i at blive oplæst af skærmlæsere. Det er dog mere robust at sikre, at indholdet enten er korrekt skjult via CSS (`display: none;`) eller fjernet fra tilgængelighedstræet.

Bemærkning om `aria-hidden` vs. `display: none`: Brug af `display: none;` i CSS fjerner effektivt elementet fra tilgængelighedstræet. Hvis du dynamisk viser/skjuler indhold ved hjælp af JavaScript uden `display: none;`, bliver `aria-hidden` vigtigere. Dog er `display: none;` generelt den foretrukne metode til at skjule indholdspaneler.

3. Tastaturbetjening

Sørg for, at brugere kan interagere med accordion-widgetten ved hjælp af standard tastaturkommandoer.

• Tab-navigation: Accordion-overskrifterne skal kunne fokuseres og vises i sidens naturlige tabulatorrækkefølge.
• Aktivering: Tryk på `Enter` eller `Mellemrum` på en fokuseret accordion-overskrift skal skifte synligheden af dens indholdspanel.
• Piletaster (Valgfrit, men anbefalet): For en mere forbedret oplevelse, overvej at implementere piletastnavigation:
  • `Pil ned`: Flyt fokus til den næste accordion-overskrift.
  • `Pil op`: Flyt fokus til den forrige accordion-overskrift.
  • `Home`: Flyt fokus til den første accordion-overskrift.
  • `End`: Flyt fokus til den sidste accordion-overskrift.
  • `Pil højre` (eller `Enter`/`Mellemrum`): Udvid/sammenklap det aktuelle accordion-element.
  • `Pil venstre` (eller `Enter`/`Mellemrum`): Sammenklap det aktuelle accordion-element og flyt fokus tilbage til overskriften.

4. Visuelle fokusindikatorer

Når en accordion-overskrift modtager tastaturfokus, skal den have en tydelig visuel indikator. Standard browserfokus-konturer er ofte tilstrækkelige, men sørg for, at de ikke fjernes af CSS (f.eks. `outline: none;`) uden at give en alternativ, meget synlig fokusstil.

Eksempel på CSS for fokus:

.accordion-button:focus {
  outline: 3px solid blue; /* Eller en farve, der opfylder kontrastkravene */
  outline-offset: 2px;
}

5. Indholdssynlighed og præsentation

• Standardtilstand: Beslut, om accordion-sektioner skal være sammenklappede eller udvidede som standard. For ofte stillede spørgsmål eller tæt information er det ofte bedst at starte sammenklappet. For navigation eller funktionsresuméer kan det være nyttigt at have én sektion udvidet som standard.
• Visuelle signaler: Brug tydelige visuelle signaler til at indikere, om en sektion er udvidet eller sammenklappet. Dette kan være et ikon (f.eks. et '+' eller '-' tegn, en pil op/ned), der ændrer udseende. Sørg for, at disse ikoner også er tilgængelige (f.eks. via `aria-label`, hvis de ikke har tekst).
• Kontrastforhold: Sørg for, at tekstindholdet i accordion-widgetten og skifteknapperne opfylder WCAG's kontrastforholdskrav (4.5:1 for normal tekst, 3:1 for stor tekst). Dette er afgørende for brugere med nedsat syn.
• Intet tab af indhold: Når en sektion udvides, skal du sikre, at dens indhold ikke flyder ud over sin container eller skjuler andet kritisk indhold.

6. Styring af fokus ved skift

Dette er et mere avanceret aspekt, men afgørende for en problemfri oplevelse.

• Udvid: Når en bruger udvider en sektion, overvej at flytte fokus til det første interaktive element i det nyligt afslørede indhold. Dette er især vigtigt, hvis det udvidede indhold indeholder formularfelter eller links.
• Sammenklap: Når en bruger sammenklapper en sektion, bør fokus vende tilbage til den accordion-overskrift, der blev skiftet. Dette forhindrer brugere i at skulle navigere tilbage gennem tidligere sammenklappede sektioner.

Implementering af fokusstyring indebærer typisk JavaScript til at fange og programmatisk sætte fokus.

Implementering af tilgængelige accordions med JavaScript

Mens semantisk HTML og ARIA er de første skridt, kræves JavaScript ofte for at håndtere den dynamiske skiftning og potentielt fokusstyring. Her er en konceptuel JavaScript-tilgang:

// Konceptuel JavaScript for Accordion-funktionalitet

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // Skift aria-expanded-tilstand
      button.setAttribute('aria-expanded', !isExpanded);

      // Skift indholdets synlighed (ved hjælp af CSS for tilgængelighed)
      content.style.display = isExpanded ? 'none' : 'block'; // Eller brug en klassetoggling

      // Valgfrit: Fokusstyring ved udvidelse
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Valgfrit: Tastaturnavigation (piletaster osv.) ville også blive implementeret her.
  // For eksempel ved at håndtere 'keydown'-events.
});

// Indledende opsætning: Skjul indhold som standard og sæt aria-expanded til false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Skjul indhold indledningsvis
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Vigtige overvejelser for JavaScript:

• CSS til skjulning: Det er bedste praksis at bruge CSS (f.eks. `display: none;` eller en klasse, der sætter `height: 0; overflow: hidden;` for glattere overgange) til at skjule indhold. Dette sikrer, at indholdet fjernes fra tilgængelighedstræet, når det ikke er synligt.
• Graceful Degradation: Sørg for, at selvom JavaScript ikke indlæses eller eksekveres, forbliver accordion-indholdet tilgængeligt (selvom det måske ikke er sammenklappeligt). Den semantiske HTML skal stadig give en vis struktur.
• Frameworks og biblioteker: Hvis du bruger JavaScript-frameworks (React, Vue, Angular) eller UI-biblioteker, skal du tjekke deres tilgængelighedsdokumentation. Mange tilbyder tilgængelige accordion-komponenter ud af boksen eller med specifikke attributter.

Test for tilgængelighed

Grundig test er afgørende for at sikre, at dine accordion-widgets er virkelig tilgængelige.

• Automatiserede værktøjer: Brug browserudvidelser (som Axe, WAVE) eller online-tjekkere til at identificere almindelige tilgængelighedsproblemer.
• Tastaturtest: Naviger og betjen accordion-widgetten kun ved hjælp af tastaturet (Tab, Shift+Tab, Enter, Mellemrum, piletaster). Sørg for, at alle interaktive elementer er tilgængelige og kan betjenes.
• Skærmlæsertest: Test med populære skærmlæsere (NVDA, JAWS, VoiceOver). Lyt til, hvordan accordion-widgettens struktur og tilstandsændringer annonceres. Giver det mening? Formidles `aria-expanded`-tilstanden korrekt?
• Brugertest: Hvis muligt, involver brugere med handicap i din testproces. Deres feedback er uvurderlig til at identificere reelle brugervenlighedsproblemer.
• Browser- og enhedstest: Test på tværs af forskellige browsere og enheder, da gengivelse og JavaScript-adfærd kan variere.

Globale perspektiver og lokalisering

Når du designer for et globalt publikum, skal du overveje disse faktorer:

• Sprog: Sørg for, at al tekst, inklusive knapetiketter og indhold, er klar, kortfattet og let at oversætte. Undgå idiomer eller kulturspecifikke referencer.
• Indholdslængde: Udvidelse af indhold kan påvirke sidelayoutet betydeligt. Vær opmærksom på, at oversat indhold kan være længere eller kortere end originalen. Test, hvordan din accordion-widget håndterer varierende indholdslængder.
• Kulturelle UI-konventioner: Mens kernefunktionaliteten i accordions er universel, kan subtile designelementer opfattes forskelligt på tværs af kulturer. Hold dig til etablerede mønstre og klare signaler.
• Ydeevne: For brugere i regioner med langsommere internetforbindelser, sørg for at din JavaScript er optimeret, og at indhold i accordions ikke påvirker den indledende sideindlæsningstid for meget.

Eksempler på tilgængelige accordions

Mange anerkendte organisationer demonstrerer tilgængelige accordion-mønstre:

• GOV.UK Design System: Ofte citeret for sit engagement i tilgængelighed, tilbyder GOV.UK veldokumenterede komponenter, herunder accordions, der overholder WCAG.
• MDN Web Docs: Mozilla Developer Network tilbyder detaljerede vejledninger og eksempler på oprettelse af tilgængelige widgets, herunder accordions, med klare forklaringer på ARIA-brug.
• Designsystemer fra store teknologivirksomheder: Virksomheder som Google (Material Design), Microsoft (Fluent UI) og Apple leverer designsystemkomponenter, der ofte prioriterer tilgængelighed. Henvisning til disse kan give robuste implementeringsmønstre.

Konklusion

Accordion-widgets er effektive værktøjer til at organisere indhold og forbedre brugeroplevelsen. Deres dynamiske natur kræver dog en samvittighedsfuld tilgang til tilgængelighed. Ved at overholde WCAG-retningslinjer, udnytte semantisk HTML, implementere ARIA korrekt, sikre robust tastaturnavigation og udføre grundig testning, kan du skabe accordion-komponenter, der er brugbare og behagelige for alle, over hele kloden. At prioritere tilgængelighed fra starten sikrer ikke kun overholdelse, men fører også til et mere inkluderende og brugervenligt produkt for alle.

Husk, tilgængeligt design er ikke en eftertanke; det er en integreret del af godt design. Ved at mestre implementeringen af tilgængelige accordion-widgets bidrager du til et mere retfærdigt og brugbart web for alle brugere.