← Tillbaka till alla riktlinjer

2.5.7

Dra med mus eller finger

Vissa personer kan inte, eller har svårt för att dra och släppa något med musen eller fingret. 

När en sida använder dra och släppa rörelser så behöver användaren utföra fyra saker:

  1. klicka eller trycka
  2. hålla in
  3. flytta
  4. släppa

Detta kräver en viss fingerfärdighet som alla inte har. Olika hjälpmedel och inmatningsverktyg såsom styrkula, ögonstyrning eller röststyrd muspekare kan göra det svårt att träffa rätt eller att dra och hålla in samtidigt. Därför är det viktigt att erbjuda ett alternativ som inte kräver dragrörelser utan där det räcker med att endast klicka. 

Alternativet till dragrörelser ska kunna uppnås genom att enbart klicka eller trycka. Tangentbordsinmatning påverkar inte huruvida denna riktlinje uppnås.

Undantag

Riktlinjen gäller inte för scrollning av sidan, eller där exempelvis CSS overflow skapar en scrollbar ruta.

Exempel på alternativ till dragrörelser

Ett vanligt exempel på när dragrörelser förekommer är när användaren kan ordna en lista. Lägg till pilar på objekten som användaren kan klicka på för att flytta ordningen, eller lägg till inmatning av en siffra för att styra ordningen. 

En karta som användaren kan flytta på med dragrörelser kan ha alternativ med knappar för att flytta kartan upp, ner, höger eller vänster.

Ett annat exempel är när man ska rita en rektangel. Då är det vanligt att man behöver klicka för att skapa ett hörn och sedan släppa där det motsatta hörnet på rektangeln ska vara. Ett alternativ till detta är att låta användaren placera första hörnet med ett klick, och sedan klicka där andra hörnet ska vara utan att behöva hålla in musen däremellan.

Alternativet behöver inte gälla för samma komponent, så länge funktionaliteten kan uppnås med enbart klick. Ett exempel på detta är ett färghjul som användaren kan dra en indikator i. Det räcker att då ha ett textfält där användaren kan skriva in färgkoden och därmed uppnå samma resultat som att klicka och dra till rätt färg.

Läs mer om riktlinje 2.5.7 på W3C webbplats