Kontrast för formulärkontroller
Silktide kontrollerar att formulärfält, till exempel textrutor och rullgardinsmenyer, visuellt skiljer sig från området runt omkring. Ett fält som smälter in i sidan är svårt för personer med nedsatt syn att hitta och använda.
Varför detta är viktigt
För att fylla i ett formulär måste du först kunna se var fälten finns. Ett vitt inmatningsfält utan kantlinje på en vit sida är osynligt för många personer med nedsatt syn – de kan inte se var de ska klicka eller skriva. Formulär är vanligtvis den mest betydelsefulla delen av en webbplats (kontakt, betalning och registrering), så fält som inte går att hitta leder direkt till förlorade förfrågningar och försäljningar. Detta är också ett krav på .
Så åtgärdar du problemet
- Ge kontrollen en synlig kantlinje eller kontur med ett på minst 3:1 mot bakgrunden runt omkring. Detta är vanligtvis en ändring på en rad i din stilmall.
\/* Fältet är osynligt mot en vit sida *\/
input { background: #fff; border: 1px solid #f2f2f2; }
\/* Åtgärdat: kantlinjen har minst 3:1 i kontrast mot bakgrunden *\/
input { background: #fff; border: 1px solid #767676; }
- Alternativt kan du fylla själva kontrollen med en färg som har minst 3:1 i kontrast mot omgivningen.
Så testar Silktide detta
- Hitta alla synliga textinmatningsfält, textområden och rullgardinsmenyer (
<input>,<textarea>och<select>) på sidan, med undantag för element som du har undantagit från kontroller. - Hoppa över inmatningstyper vars utseende ritas av webbläsaren eller operativsystemet: kryssrutor, alternativknappar, knappar för att skicka eller återställa, bildknappar, filväljare och dolda inmatningsfält.
- Fastställ kontrollens effektiva bakgrundsfärg och bakgrundsfärgen för området runt omkring, med hänsyn till transparens och överordnade element.
- Godkänn kontrollen om dess fyllning har minst 3:1 i kontrast mot den omgivande bakgrunden. Testa annars var och en av kontrollens kantlinje- och konturfärger mot den omgivande bakgrunden och godkänn om någon av dem når 3:1.
- Rapportera kontroller där inget når 3:1 och visa den bästa kontrasten som hittades.
Felsökning
Effekter som vi inte kan mäta
Skuggor, glöd, gradienter och bakgrundsbilder har ingen enskild färg att mäta,
så kontrast som enbart tillhandahålls av sådana effekter räknas inte. På samma
sätt kan en kontroll som är placerad över flera olika bakgrunder (till exempel
med position: absolute) vara omöjlig att mäta. Om en flaggad kontroll faktiskt
skiljer sig tydligt från omgivningen kan du resultatet.
Knappar, kryssrutor och alternativknappar kontrolleras inte
Knappar behöver ingen synlig avgränsning så länge deras etikett är läsbar, och kryssrutor och alternativknappar ritas vanligtvis av webbläsaren. Därför lämnas de medvetet utanför denna kontroll.
Anpassade rullgardinsmenyer
Vissa komponentbibliotek döljer den inbyggda kontrollen och ritar en egen ersättning. Silktide hoppar över den dolda inbyggda kontrollen, och den synliga ersättningen bedöms som vilket annat element som helst där det är möjligt.