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">
        Seksjon 1 Tittel
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Innhold for seksjon 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">
        Seksjon 2 Tittel
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Innhold for seksjon 2 kommer her.</p>
    </div>
  </div>
</div>

2. ARIA-attributter for dynamisk innhold

ARIA-roller og -tilstander er avgjørende for å informere hjelpemiddelteknologier om trekkspillets oppførsel.

• `role="button"`: På det interaktive elementet (knappen) som veksler innhold.
• `aria-expanded`: Satt til `true` når innholdspanelet er synlig og `false` når det er skjult. Dette kommuniserer tilstanden direkte til skjermlesere.
• `aria-controls`: På knappen, refererer til `id`-en til innholdspanelet den kontrollerer. Dette etablerer en programmatisk kobling.
• `aria-labelledby`: På innholdspanelet, refererer til `id`-en til knappen som kontrollerer det. Dette skaper en toveiskobling.
• `role="region"`: På innholdspanelet. Dette indikerer at innholdet er en oppfattbar del av siden.
• `aria-hidden`: Selv om `aria-expanded` er foretrukket for å kontrollere synlighetstilstander, kan `aria-hidden="true"` brukes på innholdspaneler som for øyeblikket ikke vises for å forhindre at de blir lest opp av skjermlesere. Det er imidlertid mer robust å sikre at innholdet enten er riktig skjult via CSS (`display: none;`) eller fjernet fra tilgjengelighetstreet.

Merknad om `aria-hidden` kontra `display: none`: Å bruke `display: none;` i CSS fjerner effektivt elementet fra tilgjengelighetstreet. Hvis du dynamisk viser/skjuler innhold med JavaScript uten `display: none;`, blir `aria-hidden` viktigere. Imidlertid er `display: none;` generelt den foretrukne metoden for å skjule innholdspaneler.

3. Betjening med tastatur

Sørg for at brukere kan interagere med trekkspillet ved hjelp av standard tastaturkommandoer.

• Tab-navigering: Trekkspill-overskriftene skal være fokuserbare og vises i den naturlige tabulatorrekkefølgen på siden.
• Aktivering: Å trykke `Enter` eller `Mellomrom` på en fokusert trekkspill-overskrift skal veksle synligheten til innholdspanelet.
• Piltaster (Valgfritt, men anbefalt): For en forbedret opplevelse, vurder å implementere navigasjon med piltaster:
  • `Pil ned`: Flytt fokus til neste trekkspill-overskrift.
  • `Pil opp`: Flytt fokus til forrige trekkspill-overskrift.
  • `Home`: Flytt fokus til den første trekkspill-overskriften.
  • `End`: Flytt fokus til den siste trekkspill-overskriften.
  • `Pil høyre` (eller `Enter`/`Mellomrom`): Utvid/slå sammen gjeldende element.
  • `Pil venstre` (eller `Enter`/`Mellomrom`): Slå sammen gjeldende element og flytt fokus tilbake til overskriften.

4. Visuelle fokusindikatorer

Når en trekkspill-overskrift får tastaturfokus, må den ha en tydelig visuell indikator. Standard nettleserfokusrammer er ofte tilstrekkelige, men sørg for at de ikke fjernes av CSS (f.eks. `outline: none;`) uten å tilby en alternativ, godt synlig fokusstil.

Eksempel på CSS for fokus:

.accordion-button:focus {
  outline: 3px solid blue; /* Eller en farge som oppfyller kontrastkravene */
  outline-offset: 2px;
}

5. Innholdssynlighet og presentasjon

• Standardtilstand: Bestem om trekkspill-seksjonene skal være sammenlagt eller utvidet som standard. For FAQ-er eller tettpakket informasjon er det ofte best å starte med dem sammenlagt. For navigasjon eller funksjonssammendrag kan det være nyttig å ha én seksjon utvidet som standard.
• Visuelle hint: Bruk tydelige visuelle hint for å indikere om en seksjon er utvidet eller sammenlagt. Dette kan være et ikon (f.eks. et '+' eller '-' tegn, en pil opp/ned) som endrer utseende. Sørg for at disse ikonene også er tilgjengelige (f.eks. via `aria-label` hvis de ikke har tekst).
• Kontrastforhold: Sørg for at tekstinnholdet i trekkspillet, og veksleknappene, oppfyller WCAGs krav til kontrastforhold (4.5:1 for normal tekst, 3:1 for stor tekst). Dette er avgjørende for brukere med nedsatt syn.
• Ingen tap av innhold: Når en seksjon utvides, sørg for at innholdet ikke flyter over beholderen sin eller skjuler annet kritisk innhold.

6. Håndtering av fokus ved veksling

Dette er et mer avansert aspekt, men avgjørende for en sømløs opplevelse.

• Utvid: Når en bruker utvider en seksjon, vurder å flytte fokus til det første interaktive elementet i det nylig viste innholdet. Dette er spesielt viktig hvis det utvidede innholdet inneholder skjemafelter eller lenker.
• Slå sammen: Når en bruker slår sammen en seksjon, bør fokus returnere til trekkspill-overskriften som ble vekslet. Dette forhindrer at brukere må navigere tilbake gjennom tidligere sammenlagte seksjoner.

Implementering av fokushåndtering innebærer vanligvis JavaScript for å fange og programmatisk sette fokus.

Implementering av tilgjengelige trekkspill-kontroller med JavaScript

Selv om semantisk HTML og ARIA er de første trinnene, er JavaScript ofte nødvendig for å håndtere dynamisk veksling og potensielt fokushåndtering. Her er en konseptuell JavaScript-tilnærming:

// Konseptuell JavaScript for trekkspill-funksjonalitet

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';
      
      // Veksle aria-expanded-tilstand
      button.setAttribute('aria-expanded', !isExpanded);

      // Veksle innholdssynlighet (bruk CSS for tilgjengelighet)
      content.style.display = isExpanded ? 'none' : 'block'; // Eller bruk en klasseveksling

      // Valgfritt: Fokushåndtering ved utvidelse
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Valgfritt: Tastaturnavigasjon (piltaster, etc.) ville også blitt implementert her.
  // For eksempel, håndtering av 'keydown'-hendelser.
});

// Første oppsett: Skjul innhold som standard og sett 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 innholdet i utgangspunktet
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Viktige betraktninger for JavaScript:

• CSS for å skjule: Det er beste praksis å bruke CSS (f.eks. `display: none;` eller en klasse som setter `height: 0; overflow: hidden;` for jevnere overganger) for å skjule innhold. Dette sikrer at innholdet fjernes fra tilgjengelighetstreet når det ikke er synlig.
• Elegant degradering: Sørg for at selv om JavaScript ikke lastes eller kjøres, forblir innholdet i trekkspillet tilgjengelig (selv om det kanskje ikke er sammenleggbart). Den semantiske HTML-en skal fortsatt gi en viss struktur.
• Rammeverk og biblioteker: Hvis du bruker JavaScript-rammeverk (React, Vue, Angular) eller UI-biblioteker, sjekk deres tilgjengelighetsdokumentasjon. Mange tilbyr tilgjengelige trekkspill-komponenter "ut av boksen" eller med spesifikke attributter.

Testing for tilgjengelighet

Grundig testing er avgjørende for å sikre at trekkspill-kontrollene dine er virkelig tilgjengelige.

• Automatiserte verktøy: Bruk nettleserutvidelser (som Axe, WAVE) eller online-verktøy for å identifisere vanlige tilgjengelighetsproblemer.
• Tastaturtesting: Naviger og betjen trekkspillet kun ved hjelp av tastaturet (Tab, Shift+Tab, Enter, Mellomrom, piltaster). Sørg for at alle interaktive elementer er nåbare og kan betjenes.
• Skjermlesertesting: Test med populære skjermlesere (NVDA, JAWS, VoiceOver). Lytt til hvordan trekkspillets struktur og tilstandsendringer blir kunngjort. Gir det mening? Formidles `aria-expanded`-tilstanden korrekt?
• Brukertesting: Hvis mulig, involver brukere med nedsatt funksjonsevne i testprosessen. Deres tilbakemeldinger er uvurderlige for å identifisere reelle brukervennlighetsproblemer.
• Nettleser- og enhetstesting: Test på tvers av ulike nettlesere og enheter, da gjengivelse og JavaScript-oppførsel kan variere.

Globale perspektiver og lokalisering

Når du designer for et globalt publikum, bør du vurdere disse faktorene:

• Språk: Sørg for at all tekst, inkludert knappeetiketter og innhold, er klar, konsis og lett å oversette. Unngå idiomer eller kulturelt spesifikke referanser.
• Innholdslengde: Utvidelse av innhold kan påvirke sideoppsettet betydelig. Vær oppmerksom på at oversatt innhold kan være lengre eller kortere enn originalen. Test hvordan trekkspillet ditt håndterer varierende innholdslengder.
• Kulturelle UI-konvensjoner: Selv om kjernefunksjonaliteten til trekkspill er universell, kan subtile designelementer oppfattes annerledes på tvers av kulturer. Hold deg til etablerte mønstre og tydelige affordanser.
• Ytelse: For brukere i regioner med tregere internettforbindelser, sørg for at JavaScript-koden din er optimalisert og at innholdet i trekkspillene ikke påvirker den opprinnelige sidelastingstiden i for stor grad.

Eksempler på tilgjengelige trekkspill-kontroller

Mange anerkjente organisasjoner demonstrerer tilgjengelige trekkspill-mønstre:

• GOV.UK Design System: Ofte sitert for sitt engasjement for tilgjengelighet, tilbyr GOV.UK veldokumenterte komponenter, inkludert trekkspill, som følger WCAG.
• MDN Web Docs: Mozilla Developer Network tilbyr detaljerte guider og eksempler på å lage tilgjengelige kontroller, inkludert trekkspill, med klare forklaringer på ARIA-bruk.
• Designsystemer fra store teknologiselskaper: Selskaper som Google (Material Design), Microsoft (Fluent UI) og Apple tilbyr designsystemkomponenter som ofte prioriterer tilgjengelighet. Å referere til disse kan gi robuste implementeringsmønstre.

Konklusjon

Trekkspill-kontroller er kraftige verktøy for å organisere innhold og forbedre brukeropplevelsen. Deres dynamiske natur krever imidlertid en samvittighetsfull tilnærming til tilgjengelighet. Ved å følge WCAG-retningslinjene, utnytte semantisk HTML, implementere ARIA korrekt, sikre robust tastaturnavigasjon og gjennomføre grundig testing, kan du lage trekkspill-komponenter som er brukbare og behagelige for alle, over hele verden. Å prioritere tilgjengelighet fra starten sikrer ikke bare samsvar, men fører også til et mer inkluderende og brukervennlig produkt for alle.

Husk at universell utforming ikke er en ettertanke; det er en integrert del av godt design. Ved å mestre implementeringen av tilgjengelige trekkspill-kontroller, bidrar du til et mer rettferdig og brukbart nett for alle brukere.