Veldlabels

Silktide controleert of elk formulierveld en elke knop op uw pagina's een naam heeft die software kan lezen. Mensen die het formulier niet kunnen zien, vertrouwen op deze namen om te weten waar elk veld om vraagt.

Een ziende bezoeker begrijpt de betekenis van een veld aan de hand van de tekst ernaast. Die visuele associatie heeft geen betekenis in code: de naam moet aan het veld zelf gekoppeld zijn, meestal met een <label>-element in .

<!-- Probleem: de tekst ziet eruit als een label, maar is niet aan het veld gekoppeld -->
<p>Volledige naam</p>
<input type="text">

Waarom dit belangrijk is

Een kondigt elk veld aan met zijn terwijl de bezoeker door een formulier navigeert. Een naamloos veld wordt alleen aangekondigd als "tekst bewerken". De bezoeker moet dan aan de hand van de context raden wat er moet worden ingevuld, en bij een langer formulier wordt dat al snel onmogelijk. Velden zonder label zijn een van de meest voorkomende redenen waarom een formulier niet zonder zicht kan worden ingevuld. Dit leidt tot minder aanmeldingen, bestellingen en aanvragen.

Hoe u dit oplost

Koppel een <label> aan elk veld, via een ID of door het veld erin te plaatsen:

<!-- Gekoppeld via ID -->
<label for="name">Volledige naam</label>
<input type="text" id="name">

<!-- Of rond het veld geplaatst -->
<label>Volledige naam <input type="text"></label>

Knoppen krijgen zelf een naam via hun tekst of value; een label-element is niet nodig:

<button>Bericht verzenden</button>
<input type="submit" value="Bericht verzenden">

Gebruik een -attribuut, zoals aria-label of aria-labelledby, wanneer een zichtbaar label niet praktisch is. Let op: dit helpt alleen ; ziende bezoekers zien het niet.

Vertrouw niet op placeholder-tekst als label: deze verdwijnt zodra de bezoeker begint te typen en wordt niet consequent als naam behandeld.

Hoe Silktide dit test

Zoek de formulierbesturingselementen op elke pagina: invoervelden, tekstvakken, keuzelijsten en knoppen, plus elementen waaraan met ARIA een formulierbesturingselementrol is gegeven (zoals role="button" of role="checkbox").
Sla besturingselementen over die geen naam nodig hebben: verborgen invoervelden, velden die door bekende widgets van derden worden ingevoegd (zoals -diensten of de verborgen formulieren die tracking- en vertaalscripts voor eigen gebruik toevoegen), en elementen waarvan de ARIA-rol geen label vereist.
Bepaal de toegankelijke naam van elk besturingselement aan de hand van het label, ARIA-attributen, knoptekst of waarde.
Rapporteer elk besturingselement waarvan de toegankelijke naam leeg is.

Problemen oplossen

Het veld heeft tekst ernaast

Tekst in de buurt geeft een veld geen naam, tenzij deze in de code is gekoppeld. Gebruik een <label> met een for-attribuut of plaats het veld in het label.

Het veld is decoratief of wordt beheerd door een plug-in

Velden die worden ingevoegd door widgets waarover u geen controle hebt, kunnen moeilijk rechtstreeks op te lossen zijn. Controleer of de plug-in een toegankelijkheidsinstelling of update biedt. Als het veld werkelijk geen invloed heeft op bezoekers, kunt u de bevinding .