Komponenter
Switch
Switch lar brukerne velge mellom to alternativer ved å slå noe av eller på.
Dette må du sjekke selv
Feltet skal ha en synlig label.
Skjermlesere skal presentere ledetekst, beskrivelse og feilmeldinger når feltet får fokus.
Du kan bruke Field for å koble sammen label, beskrivelse og feilmeldinger.
Feltet skal ha et tydelig tilgjengelig navn som samsvarer med den synlige ledeteksten.
Det tilgjengelige navnet skal inneholde den synlige teksten som beskriver feltet. Dette gjør at brukere av talegjenkjenning og skjermlesere kan referere til feltet med samme navn som vises på skjermen.
Obligatoriske felt skal være tydelig merket.
Brukeren skal enkelt kunne forstå hvilke felt som må fylles ut. Følg mønsteret for obligatoriske og valgfrie skjemafelt
Feilmeldinger skal være tydelig knyttet til riktig felt og forklare hvordan feilen kan rettes.
Feilmeldingen skal gjøre det klart hvilket felt som inneholder en feil, hva som er galt og hvordan brukeren kan rette den. Unngå generelle meldinger som «Feil» eller «Ugyldig verdi». Bruk heller konkrete meldinger, for eksempel «E-postadressen må inneholde @».
Se mønsteret for brukerutløste feilmeldinger for anbefalinger om når og hvordan feilmeldinger bør vises.
WCAG: 3.3.1 Identifikasjon av feil (uutilsynet) og 3.3.3 Forslag ved feil (uutilsynet)
role="switch"
Vi bruker role="switch" for å fortelle skjermlesere at dette er en vippebryter. Dette gjør at skjermlesere kan gi brukeren informasjon om at dette er en vippebryter og at den kan skrus av og på. Det er ikke lagt på aria-checked siden dette er ikke nødvendig når bryteren er en input med type="checkbox".
Test med tastatur
Sjekk at du kan
- nå switch med tab
- slå switch av og på med både Mellomrom og Enter
- navigere videre fra switch med tab