WCAG 2.1.1 Tangentbord

Allt som går att göra med musen ska också gå att göra med tangentbordet. Det behövs för den som inte kan använda mus, och skärmläsare och röststyrning bygger på samma sätt att nå kontrollerna. I en webbutik är det oftast egenbyggda kontroller som brister: filter, storleksval, bildgallerier och menyer som bara öppnas när muspekaren är över dem.

• Storleks- och färgval byggda med div- eller span-element som bara reagerar på klick.
• Filter i produktlistan som går att bocka i med musen men inte nås med Tab.
• Undermenyer som bara öppnas när muspekaren är över menyn.
• Bildgalleriet på produktsidan går bara att bläddra i genom att svepa eller klicka på bilden.
• Cookierutans knappar går inte att nå med Tab, så att rutan blir stående över sidan.
• Knappen Lägg i varukorgen är en länk utan href, som inte går att fokusera.

Använd button och a med href för det som går att klicka på, och riktiga formulärelement för val. Då följer tangentbordet med utan extra kod. Menyer som öppnas vid hovring ska också gå att öppna med en knapp.

<!-- Går bara att klicka på -->
<div class="storlek" onclick="valjStorlek('M')">M</div>

<!-- Går att nå med Tab och välja med piltangenterna -->
<fieldset>
  <legend>Storlek</legend>
  <input type="radio" id="storlek-m" name="storlek" value="M">
  <label for="storlek-m">M</label>
</fieldset>

Månadsgranskningen

Månadsgranskningen trycker Tab genom sidorna i en riktig webbläsare och hittar klickbara element som inte går att fokusera, och fokusfällor. Om varje kontroll också fungerar, till exempel att ett filter faktiskt ändrar listan när du trycker på blanksteg, behöver du prova själv. Betalsteg från andra leverantörer granskas bara så långt det går utan att fylla i något.

• Understanding 2.1.1 Keyboard 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.1 har samma lydelse i WCAG 2.1.