Bruk av mus er påkrevd

(Henvisende UWEM-test: 6.4_HTML_01)

Testinformasjon

Feil på grunn av

Nettsiden krever bruk av mus og kan ikke bruker med f.eks. bare tastatur.

Det undersøkte elementet krever bruk av mus

  • onkeydown,
  • onmouseup,
  • onclick,
  • onmouseover, eller
  • onmouseout

og det kreves at tilsvarende handlinger kan bli utført av f.eks. tastatur.

Hvorfor dette vil være en hindring

Noen brukere kan ikke benytte seg ikke av mus for å navigere på nettsiden, men benytter i stedet f.eks. bare tastatur. Funksjonalitet man kun har tilgang til ved bruk av mus vil dermed være utilgjengelig for disse brukerne.

Løsning

Legg til mulighet for bruk av tastatur i tillegg til mus. Den følgende tabellen sammenligner bruk av mus og tastatur: 

Spesifikk for mus Tastaturspesifikk eller enhetsuavhengig
onmousedown onkeydown
onmouseup onkeyup
onclick onkeypress
onmouseover onfocus
onmouseout onblur

Lenker som bruker onclick bør IKKE bruke onkeypress, da dette vil hindre for de som bruker tabulatortast for å navigere på nettsiden.

 

Referanse

Henvisning til WCAG 1.0-kontrollpunkt

6.4

"For script og appletts, sørg for at nettsidem er uavhengig av maskin- og programvare." [Priority 2]
WCAG 1.0 Checkpoint 6.4

 

Henvisning til UWEM-test

6.4_HTML_01

Denne testen er rettet mot å finne ut om nettsiden krever bruk av mus, eller har en tastaturspesifikk (eller enhetsuavhengig) versjon.

Eksempler

  • Mouse-down and mouse-up

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onmousedown must also be provided onkeydown.
    • Every functionality provided onmouseup must also be provided onkeyup.
       
    Dårlig eksempel:
    <body>
    <p>Click the button and hold the mouse-button for some time to see the event-handler in action (this functionality is not available without mouse-usage):</p>
     
    <input type="button" value="Click me!"
    onmousedown="this.value = 'Pushed the mouse-button!';"  
    onmouseup="this.value = 'Released the mouse-button!';"   >
     
    </body>
    Godt eksempel:
    <body>
    <p>Click the button and hold the mouse-button for some time to see the event-handler in action (this functionality can also be triggered using the keyboard):</p>
     
    <input type="button" value="Click me!"

    onmousedown="this.value = 'Pushed the mouse-button!';"
    onkeydown="return this.onmousedown();"

    onmouseup="this.value = 'Released the mouse-button!';"
    onkeyup="return this.onmouseup();">
     
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
  • On click

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onclick must also be provided onkeypress.
    Dårlig eksempel:
    <body>
    <a href="http://accessibility.egovmon.no"
    onclick="alert('Have fun checking your page with the eAccessibility Checker')"   >
    Go to the eAccessibility Checker
    </a>
    </body>
    Godt eksempel:
    <body>
    <a href="http://accessibility.egovmon.no"
    onclick="alert('Have fun checking your page with the eAccessibility Checker')"
    onkeypress="alert('Have fun checking your page with the eAccessibility Checker')">
    Go to the eAccessibility Checker
    </a>
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
  • Mouse-over and mouse-out

    To support navigation without a mouse there must be a corresponding key functionality:

    • Every functionality provided onmouseover must also be provided onfocus.
    • Every functionality provided onmouseout must also be provided onblur.
       
    Dårlig eksempel:
    <body>
    <p>Move the mouse over the image of Max Mustermann to see him smiling (this functionality is not available without mouse-usage).</p>
     
    <img src="images/maxMustermann.jpg" alt="Image of Max Mustermann"
    onmouseover="this.src = 'images/maxMustermann_smiling.jpg';"  
    onmouseout="this.src = 'images/maxMustermann.jpg';"       >
     
    </body>
    Godt eksempel:
    <body>
    <p>Move the mouse over the image of Max Mustermann to see him smiling (this functionality can also be triggered using the keyboard).</p>
     
    <img src="images/maxMustermann.jpg" alt="Image of Max Mustermann"

    onmouseover="this.src = 'images/maxMustermann_smiling.jpg';"
    onfocus="return this.onmouseover();"

    onmouseout="this.src = 'images/maxMustermann.jpg';"
    onblur="return this.onmouseout();">
     
    </body>
    Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
Spørsmål, forslag, innvendinger? Gi oss en tilbakemelding!
vis eksempelvis
skjul eksempelskjul