Standarder · ARIA

Roll Widget

switch

Markerar ett element som en på/av-växel. Funktionellt nära en kryssruta, men presenteras som "switch, on" eller "switch, off" i stället för "checked" — passar bättre för en inställningsväxel. Det finns inget inbyggt HTML-element för detta ännu.

När ska du använda det

För en binär inställningskontroll där “on” och “off” beskriver tillståndet bättre än “checked” och “unchecked” — Wi-Fi, mörkt läge, notiser, flygplansläge. Det finns inget inbyggt HTML-switcelelement, så du har två giltiga tillvägagångssätt:

  1. <button type="button" role="switch" aria-checked="false"> — föredraget, eftersom du ärver inbyggt knapptangentbords- och aktiveringsbeteende.
  2. <input type="checkbox" role="switch"> — också acceptabelt; formulärinlämning fungerar fortfarande, och rollöverridet ändrar hur hjälpmedelstek­niken presenterar det.

Använd inte role="switch" för saker som inte är genuint binära. Om åtgärden navigerar, öppnar en meny eller startar en process, använd button eller link.

Tangentbords- och fokuskontrakt

Enligt APG:s switch-mönster:

  • Tab flyttar fokus till växeln.
  • Space växlar aria-checked. Enter BÖR också växla (APG rekommenderar båda, eftersom användare förväntar sig knappliknande beteende från en knappbaserad växel).
  • Fokus stannar på växeln efter växling.

aria-checked tar bara "true" eller "false" på en switch — "mixed" är ogiltigt här.

Vanliga fel

  • role="switch" utan aria-checked vid första renderingen. Tillståndet är obligatoriskt.
  • aria-checked="mixed" på en switch. Giltigt bara för kryssruta.
  • aria-pressed används i stället för aria-checked. aria-pressed hör hemma på en växelknapp (ljud av/på), där knappen utför en åtgärd. En switch representerar ett inställningstillstånd.
  • En switch som inte uppdaterar aria-checked när den växlas via CSS enbart.
  • Alltför litet klickområde som inte uppfyller WCAG 2.5.8 Målstorlek. Det interaktiva området måste vara minst 24×24 CSS-pixlar.

Exempel

<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>