Egendefinert knapp (custom widget)

WAI-ARIA kan brukes for at egendefinerte kontroller skal fungere med tastatur, skjermlesere og andre hjelpemidler.

Lager du egendefinerte kontroller, for eksempel noe liknende den røde og blå knappen nedenfor må du bruke WAI-ARIA for at de skal kunne brukes med tastatur, skjermlesere og andre hjelpemidler.

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. På samme måte kan du hoppe til neste knapp med skjermleser (b med Jaws). Du vil finne ut at kun den blå knappen fungerer.

Knapp uten WAI-ARIA merking (rød knapp)

Vis kode

Rød knapp uten riktig merking

Riktig merket knapp (blå knapp)

Vis kode

Blå knapp med riktig merking