Kontrast for skjemakontroller
Silktide kontrollerer at skjemafelt, for eksempel tekstbokser og rullegardinmenyer, skiller seg visuelt ut fra området rundt dem. Et felt som går i ett med siden, er vanskelig for personer med nedsatt syn å finne og bruke.
Hvorfor dette er viktig
For å fylle ut et skjema må du først kunne se hvor feltene er. Et hvitt inndatafelt uten kantlinje på en hvit side er usynlig for mange personer med nedsatt syn – de kan ikke se hvor de skal klikke eller skrive. Skjemaer er vanligvis den viktigste delen av et nettsted (kontakt, betaling, registrering), så felt som ikke kan finnes, fører direkte til tapte henvendelser og salg. Dette er også et krav i på .
Slik løser du det
- Gi kontrollen en synlig kantlinje eller omriss med et på minst 3:1 mot bakgrunnen rundt den. Dette er vanligvis en endring på én linje i stilarket ditt.
\/* Feltet er usynlig mot en hvit side *\/
input { background: #fff; border: 1px solid #f2f2f2; }
\/* Rettet: Kantlinjen har minst 3:1 kontrast mot bakgrunnen *\/
input { background: #fff; border: 1px solid #767676; }
- Alternativt kan du fylle selve kontrollen med en farge som har minst 3:1 kontrast mot omgivelsene.
Slik tester Silktide dette
- Finn alle synlige tekstinndatafelt, tekstområder og rullegardinmenyer (
<input>,<textarea>og<select>) på siden, og hopp over elementer du har utelatt fra kontrollen. - Hopp over inndatatyper som tegnes av nettleseren eller operativsystemet: avmerkingsbokser, alternativknapper, sendings-/tilbakestillings-/bildeknapper, filvelgere og skjulte inndatafelt.
- Finn kontrollens effektive bakgrunnsfarge og bakgrunnsfargen i området rundt den, og ta hensyn til gjennomsiktighet og overordnede elementer.
- Kontrollen godkjennes hvis fyllet har minst 3:1 kontrast mot bakgrunnen rundt. Hvis ikke, testes hver av kontrollens kantlinje- og omrissfarger mot bakgrunnen rundt, og kontrollen godkjennes hvis én av dem når 3:1.
- Rapporter kontroller der ingenting når 3:1, og vis den beste kontrasten som ble funnet.
Feilsøking
Effekter vi ikke kan måle
Skygger, glød, gradienter og bakgrunnsbilder har ingen enkeltfarge som kan måles, så kontrast som bare kommer fra slike effekter, godkjennes ikke. En kontroll som er plassert over flere ulike bakgrunner (for eksempel med position: absolute), kan også være umulig å måle. Hvis en flagget kontroll faktisk skiller seg ut, kan du funnet.
Knapper, avmerkingsbokser og alternativknapper kontrolleres ikke
Knapper trenger ikke en synlig avgrensning så lenge teksten på dem er lesbar, og avmerkingsbokser og alternativknapper tegnes vanligvis av nettleseren. Derfor utelater denne kontrollen dem med hensikt.
Rullegardinmenyer med egendefinert stil
Noen komponentbiblioteker skjuler den opprinnelige kontrollen og tegner sin egen erstatning. Silktide hopper over den skjulte opprinnelige kontrollen, og den synlige erstatningen vurderes som alle andre elementer når det er mulig.