WCAG 2.4.3 Fokusordning

När kunden flyttar sig med Tab ska fokus gå i en ordning som följer sidans innehåll och inte ändrar betydelsen. I en webbutik märks felen när något öppnas ovanpå sidan: en utfällbar varukorg, ett snabbköpsfönster eller cookierutan. Fokus ska då flytta in i rutan, och tillbaka till knappen som öppnade den när rutan stängs.

• Positivt tabindex på enskilda element, så att fokus hoppar runt på sidan i en annan ordning än den som syns.
• Den utfällbara varukorgen öppnas, men fokus ligger kvar bakom den på produktsidan.
• När ett fönster stängs hamnar fokus högst upp på sidan i stället för på knappen som öppnade det.
• Ordningen i koden skiljer sig från ordningen på skärmen, till exempel när CSS flyttar filtren till vänster.
• Cookierutan ligger sist i koden och nås först efter hela sidan, fast den täcker sidan.

Låt ordningen i koden följa ordningen på skärmen och ta bort positiva tabindex. Flytta fokus in i rutor som öppnas, och tillbaka när de stängs.

<!-- Ändrar ordningen för hela sidan -->
<button tabindex="3">Lägg i varukorgen</button>

<!-- Låt ordningen i koden styra -->
<button>Lägg i varukorgen</button>

<script>
  visaVarukorg.addEventListener("click", () => {
    varukorg.hidden = false;
    varukorg.querySelector(".stang").focus();
  });
</script>

Gratistestet

Gratistestet letar efter det här i källkoden:

• Element har positivt tabindex, vilket ändrar tangentbordsordningen.

Månadsgranskningen trycker Tab genom sidorna och hittar fokusfällor. Om ordningen är logisk, och om fokus hamnar rätt när en ruta öppnas och stängs, behöver en människa bedöma.

• Understanding 2.4.3 Focus Order 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.4.3 har samma lydelse i WCAG 2.1.