WCAG 2.4.7 Synligt fokus

Den som använder tangentbordet ska alltid kunna se var fokus är. Webbläsarna visar en fokusmarkering av sig själva, men många teman tar bort den för att den inte passar designen. Utan markering går det inte att veta vilken produkt, vilket filter eller vilket fält i kassan man står på.

• outline: none eller outline: 0 på alla element i temats CSS, utan någon ersättning.
• Fokus visas bara som en svag färgändring på texten, som knappt går att se.
• Produktkort där hela kortet är en länk, men markeringen hamnar på en dold del av kortet.
• Fokusmarkeringen syns på knappar men inte på fälten i kassan eller på länkarna i sidfoten.
• Kryssrutor och radioknappar som har ersatts av egna bilder, där fokus ligger på det dolda fältet och inget syns.

Ta bort outline: none ur temat, eller ersätt den med en egen markering som syns mot alla bakgrunder. Med :focus-visible visas markeringen när kunden använder tangentbordet men inte vid klick.

/* Tar bort markeringen helt */
a:focus, button:focus { outline: none; }

/* Tydlig markering vid tangentbordsanvändning */
:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

Månadsgranskningen

Månadsgranskningen trycker Tab genom sidorna och jämför varje element med och utan fokus. Element där varken ram, skugga, färg eller bakgrund ändras räknas som fel. Om markeringen är tydlig nog, och syns mot alla bakgrunder, bedömer du själv.

• Understanding 2.4.7 Focus Visible 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.7 har samma lydelse i WCAG 2.1.