switch

Hvornår bruges det

Til en binær indstillingskontrol, hvor “til” og “fra” beskriver tilstanden bedre end “markeret” og “ikke markeret” — Wi-Fi, mørk tilstand, notifikationer, flytilstand. Der er intet native HTML-switch-element, så du har to gyldige tilgange:

1. <button type="button" role="switch" aria-checked="false"> — foretrukket, fordi du arver native button-fokus og -aktivering.
2. <input type="checkbox" role="switch"> — også acceptabelt; formularen indsender stadig, og rolletilsidesættelsen ændrer, hvordan hjælpeteknologi annoncerer det.

Brug ikke role="switch" til ting, der ikke er ægte binære. Hvis handlingen navigerer, åbner en menu eller starter en proces, brug button eller link.

Tastatur + fokuskontrakt

I henhold til APG switch-mønsteret:

• Tab flytter fokus til kontakten.
• Mellemrum skifter aria-checked. Enter BØR også skifte (APG anbefaler begge, da brugere forventer knap-lignende adfærd fra en knap-baseret kontakt).
• Fokus forbliver på kontakten efter skift.

aria-checked accepterer kun "true" eller "false" på en switch — "mixed" er ugyldig her.

Typiske fejl

• role="switch" uden aria-checked ved første rendering. Tilstanden er påkrævet.
• aria-checked="mixed" på en switch. Kun gyldig for checkbox.
• Brug af aria-pressed i stedet for aria-checked. aria-pressed hører til på en toggle-knap (mute/unmute), hvor knappen udfører en handling. En switch repræsenterer en indstillingstilstand.
• En switch, der ikke opdaterer aria-checked, når den skiftes kun via CSS.
• Små switch-hitboxes, der fejler WCAG 2.5.8 Målstørrelse. Det interaktive område skal være mindst 24x24 CSS-pixels.

Eksempel

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>