Kontrast for formularkontroller
Silktide tjekker, at formularfelter, såsom tekstfelter og rullemenuer, skiller sig visuelt ud fra området omkring dem. Et felt, der går i ét med siden, er svært for personer med nedsat syn at finde og bruge.
Hvorfor det er vigtigt
For at udfylde en formular skal du først kunne se, hvor felterne er. Et hvidt inputfelt uden kant på en hvid side er usynligt for mange personer med nedsat syn – de kan ikke se, hvor de skal klikke eller skrive. Formularer er som regel den vigtigste del af en website (kontakt, betaling, tilmelding), så felter, der ikke kan findes, fører direkte til tabte henvendelser og salg. Dette er også et krav på .
Sådan løser du det
- Giv kontrollen en synlig kant eller kontur med et på mindst 3:1 i forhold til baggrunden omkring den. Dette er som regel en ændring på én linje i dit stylesheet.
/* Felt usynligt mod en hvid side */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Løst: kanten har mindst 3:1 kontrast med baggrunden */
input { background: #fff; border: 1px solid #767676; }
- Du kan også udfylde selve kontrollen med en farve, der har mindst 3:1 kontrast i forhold til omgivelserne.
Sådan tester Silktide dette
- Find alle synlige tekstinput, tekstområder og rullemenuer (
<input>,<textarea>og<select>) på siden, og spring de elementer over, som du har udelukket fra tjek. - Spring inputtyper over, hvis udseende tegnes af browseren eller operativsystemet: afkrydsningsfelter, alternativknapper, send-/nulstil-/ billedknapper, filvælgere og skjulte inputfelter.
- Fastslå kontrollens effektive baggrundsfarve og baggrundsfarven for området omkring den under hensyntagen til gennemsigtighed og overordnede elementer.
- Godkend kontrollen, hvis dens fyld har mindst 3:1 kontrast med den omgivende baggrund. Ellers testes hver af kontrollens kant- og konturfarver mod den omgivende baggrund, og kontrollen godkendes, hvis en af dem når 3:1.
- Rapportér kontroller, hvor intet når 3:1, og vis den bedste fundne kontrast.
Fejlfinding
Effekter, vi ikke kan måle
Slagskygger, glød, farveforløb og baggrundsbilleder har ikke én enkelt farve at
måle, så kontrast, der kun leveres af sådanne effekter, tæller ikke med.
Tilsvarende kan en kontrol, der er placeret over flere forskellige baggrunde
(for eksempel med position: absolute), muligvis ikke måles. Hvis en markeret
kontrol reelt er tydelig, kan du fundet.
Knapper, afkrydsningsfelter og alternativknapper tjekkes ikke
Knapper behøver ikke en synlig afgrænsning, så længe deres etiket er læsbar, og afkrydsningsfelter og alternativknapper tegnes normalt af browseren. Derfor udelader dette tjek dem bevidst.
Specialdesignede rullemenuer
Nogle komponentbiblioteker skjuler den oprindelige kontrol og tegner deres egen erstatning. Silktide springer den skjulte oprindelige kontrol over, og den synlige erstatning vurderes som ethvert andet element, hvor det er muligt.