Egendefinert knapp (med og uten WAI-ARIA merking)

Skrevet av: Morten Tollefsen

Sist oppdatert: 7.8.13

Eksempelsamling

Kodeeksemplene nedenfor er hentet fra et studentprosjekt (åpnes i nytt vindu)

Kort forklaring

Lager du egendefinerte knapper, for eksempel noe liknende den røde og blå knappen nedenfor må du bruke WAI-ARIA for at de skal kunne brukes med tastatur (og skjermlesere). Bildet som likner en knapp skal merkes med role="button". Legg til tabindex="0" for å være sikker på at knappen kan nås med Tab. I tillegg må du lage en keyboard handler.

Prøv gjerne om du klarer å aktivere den røde knappen med tastatur.

Knapp uten WAI-ARIA merking

<p><img src="btn1.png" alt="Knapp uten riktig merking" onclick="alert('Nå har du aktivert knappen med mus!');"></p>

Riktig merket knapp

<p><img src="btn2.png" alt="Riktig merket knapp"
role="button" tabindex=0
onKeyDown="if(event.keyCode==13 || event.keyCode==32) alert('Du foretrekker tastatur!');"
onClick="alert('Du foretrekker mus!');"></p>

Mer informasjon