WCAG 2.1.2 Ingen tangentbordsfälla

Går det att flytta fokus till en del av sidan med tangentbordet, ska det också gå att flytta fokus därifrån med tangentbordet. Krävs något annat än Tab, piltangenterna eller Esc ska det stå hur. En fälla stoppar köpet helt. I en webbutik är det oftast rutor som läggs ovanpå sidan, och inbäddade fönster från andra leverantörer, som fångar fokus.

• Den utfällbara varukorgen håller kvar fokus och saknar en stängknapp som går att nå med Tab.
• Cookierutan fångar fokus men har inga knappar som går att nå, så att kunden inte kommer vidare.
• Ett inbäddat betalfönster eller en kartväljare för ombud tar fokus och släpper det inte.
• Chattfönstret öppnas av sig självt och fokus går bara runt bland chattens egna knappar.
• Ett nyhetsbrevsfönster går bara att stänga med musen, genom att klicka utanför rutan.

Ge varje ruta som läggs ovanpå sidan en stängknapp och låt Esc stänga den. Flytta fokus tillbaka till knappen som öppnade rutan. Använd gärna dialog-elementet, som sköter mycket av det själv.

<button id="visa-varukorg">Varukorg (2)</button>

<dialog id="varukorg" aria-labelledby="varukorg-rubrik">
  <h2 id="varukorg-rubrik">Din varukorg</h2>
  ...
  <button id="stang-varukorg">Stäng varukorgen</button>
</dialog>

<script>
  const visa = document.getElementById("visa-varukorg");
  const varukorg = document.getElementById("varukorg");
  visa.addEventListener("click", () => varukorg.showModal());
  document.getElementById("stang-varukorg")
    .addEventListener("click", () => varukorg.close());
  // Esc stänger dialog av sig självt. Fokus tillbaka till knappen:
  varukorg.addEventListener("close", () => visa.focus());
</script>

Månadsgranskningen

Gratistestet läser bara källkoden och kan inte se var fokus fastnar. Månadsgranskningen trycker Tab genom sidorna i en riktig webbläsare och larmar när fokus går runt i en ruta utan att komma ut. Rutor som bara öppnas efter ett klick, som varukorgen och betalfönstret, behöver du prova själv: öppna dem och försök ta dig ut med Tab och Esc.

• Understanding 2.1.2 No Keyboard Trap hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 2.1.2 har samma lydelse i WCAG 2.1.