Avstånd mellan klickytor

Introduktion

WCAG 2.2 har ett nytt krav som heter 2.5.8 Target Size (Minimum) Nivå AA

https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/#changes-from-wcag-21-to-wcag-22

Detta dokument kommer gå in på riktlinjer som gäller för avstånd mellan klickbara ytor samt avgränsningar för kriteriet om avstånd mellan klickbara ytor.

OBS! Detta dokument baseras på ett av WCAG 2.2 kriterium som fortfarande står som DRAFT/UTKAST. Så något kan fortfarande ändras eller alternativt tas bort, men sannolikheten känns liten. När väl WCAG 2.2 gör en officiell release så kommer detta dokument ses över och justeras.

Syfte

Meningen med kriteriet är att hjälpa användaren att träffa rätt klickyta utan att riskera att klicka på någon annan interaktiv yta av misstag. När interaktiva element är för små så är det svårt för användare med exempelvis skakningar, stora fingrar, en hand eller nedsatt motorik att träffa rätt. Genom att använda sig utav tillräcklig storlek och tillräckligt avstånd mellan element så minskar risken att användaren gör misstag. Kravet är att klickytor ska ha en area på minst 24 x 24 css pixlar. Annat alternativ är att klickytan kan ha en area på 20 x 20 css pixlar men det finns ytterligare 4 css pixlar mellan den aktuella klickytan och nästa. Fler exempel finns längre ner under rubriken “Visuella exempel”.

Exempel: Personer med handskakningar kan uppleva klickytor som mycket irriterande och krångligt eftersom chansen finns att användaren vill klicka på exempelvis en ”skicka-knapp” men råkar av misstag klicka på avbryt-knappen som ligger för tätt intill. Detta avbryter hela processen för användaren och hen måste börja om på nytt.

Men om avstånden mellan klickytor är tillräckliga så har användaren det lättare att klicka på rätt knapp, även om hen sitter på en skakig buss eller liknande. Det är mycket lättare att klicka/trycka på rätt knapp till och med när man sitter på en skakig buss.

 Notera

Klickytor som tillåter att värden kan väljas baserat på position inom klickytan ingår i kriteriet. Exempel inkluderar sliders med värden, färgväljare som visar en gradient av färger eller redigeringsbara områden där du placerar markören.

Avgränsningar

Klickyta ska ha en area av minst 24 x 24 css pixlar, förutom när:

• Avståndet mellan en klickyta och har 24 css pixlar till varje närliggande klickyta. Om det klickbara elementet är mindre än 24 x 24 css pixlar men har tillräckligt med avstånd, så är den godkänd.

• Om klickytan ligger inuti en mening eller ett textblock. Som exempelvis en text-länk inuti en mening eller paragraf.    

• En särskild presentation av klickytan är avgörande för den information som förmedlas. Till exempel i digitala kartor används pins/stift för att markera en position på kartan. Om det finns många stift nära varandra på kartan så kommer det ofta att vara under 24 CSS-pixlar.

 In zoomning

Kravet är oberoende av sidans zoomfaktor; när användare zoomar in ändras inte CSS-pixelstorleken för element. Detta innebär att författare inte kan uppfylla kravet genom att hävda att klickytan kommer att ha tillräckligt med mellanrum eller tillräcklig storlek om användaren zoomar in på sidan.

Kravet gäller inte en klickyta när de är skymd av innehåll som visas som ett resultat av en användarinteraktion eller skriptbeteende hos innehåll, till exempel:

• interagera med en kombinationsruta som visar en dropdown-lista med förslag.

• aktivering av en knapp som visar en modal dialogruta.

• innehållet visar en cookie-banner efter att sidan har laddats.

• innehållet visar en "Ta en undersökning"-dialogruta efter en viss period av inaktivitet av användaren.

Kravet gäller dock för mål i allt nytt innehåll som dyker upp ovanpå annat innehåll.

Visuella exempel

Följ länken till WCAG’s utkast för att se illustrerande och beskrivande exempel på vad som gäller för olika användningsområden: https://w3c.github.io/wcag/understanding/target-size-minimum.html