Contrast van formuliervelden
Silktide controleert of formuliervelden, zoals tekstvakken en vervolgkeuzemenu's, visueel afsteken tegen het gebied eromheen. Een veld dat opgaat in de pagina is moeilijk te vinden en te gebruiken voor mensen met verminderd zicht.
Waarom dit belangrijk is
Om een formulier in te vullen, moet je eerst kunnen zien waar de velden staan. Een wit invoerveld zonder rand op een witte pagina is voor veel mensen met slecht zicht onzichtbaar: zij kunnen niet zien waar ze moeten klikken of typen. Formulieren zijn meestal het belangrijkste onderdeel van een website (contact, afrekenen, aanmelden), dus velden die niet gevonden kunnen worden, leiden rechtstreeks tot gemiste aanvragen en verkopen. Dit is ook een vereiste van .
Zo los je dit op
- Geef het besturingselement een zichtbare rand of omlijning met een van ten minste 3:1 ten opzichte van de achtergrond eromheen. Meestal is dit een wijziging van één regel in je stylesheet.
\/* Veld onzichtbaar tegen een witte pagina *\/
input { background: #fff; border: 1px solid #f2f2f2; }
\/* Opgelost: de rand heeft ten minste een contrastverhouding van 3:1 met de achtergrond *\/
input { background: #fff; border: 1px solid #767676; }
- Vul het besturingselement zelf met een kleur die ten minste 3:1 contrasteert met de omgeving.
Hoe Silktide dit controleert
- Zoek elk zichtbaar tekstinvoerveld, tekstgebied en vervolgkeuzemenu (
<input>,<textarea>en<select>) op de pagina, waarbij elementen die je hebt uitgesloten van controles worden overgeslagen. - Sla invoertypen over waarvan de weergave door de browser of het besturingssysteem wordt getekend: selectievakjes, keuzerondjes, knoppen voor verzenden/resetten/afbeeldingen, bestandskiezers en verborgen invoervelden.
- Bepaal de effectieve achtergrondkleur van het besturingselement en de achtergrondkleur van het gebied eromheen, waarbij rekening wordt gehouden met transparantie en bovenliggende elementen.
- Geef het besturingselement een voldoende resultaat als de vulling ten minste 3:1 contrasteert met de omringende achtergrond. Test anders elk van de rand- en omlijningskleuren van het besturingselement tegen de omringende achtergrond en geef een voldoende resultaat als een ervan 3:1 bereikt.
- Rapporteer besturingselementen waarbij niets 3:1 bereikt en toon het beste gevonden contrast.
Problemen oplossen
Effecten die we niet kunnen meten
Slagschaduwen, gloed, kleurverlopen en achtergrondafbeeldingen hebben geen enkele
kleur die kan worden gemeten. Contrast dat alleen door dergelijke effecten wordt
geleverd, telt daarom niet mee. Ook kan een besturingselement dat over meerdere
verschillende achtergronden heen staat (bijvoorbeeld met position: absolute)
mogelijk niet worden gemeten. Als een gemarkeerd besturingselement daadwerkelijk
onderscheidend is, je de bevinding goed.
Knoppen, selectievakjes en keuzerondjes worden niet gecontroleerd
Knoppen hebben geen zichtbare begrenzing nodig zolang hun label leesbaar is, en selectievakjes en keuzerondjes worden meestal door de browser getekend. Daarom worden ze bij deze controle bewust overgeslagen.
Aangepaste vervolgkeuzemenu's
Sommige componentbibliotheken verbergen het oorspronkelijke besturingselement en tekenen hun eigen vervanging. Silktide slaat het verborgen oorspronkelijke besturingselement over en beoordeelt de zichtbare vervanging waar mogelijk als elk ander element.