Vermijd labels voor bedieningselementen die geen label ondersteunen
Silktide controleert formuliervelden met labels die via een ID naar een ander element verwijzen en rapporteert labels die verwijzen naar elementen die geen label zouden moeten hebben: knoppen, knopachtige invoervelden en elementen die helemaal geen label kunnen krijgen. Deze elementen worden benoemd door hun eigen tekst of waarde, en een afzonderlijk label zorgt voor tegenstrijdige namen.
In benoemt een <label> een formulierveld via het attribuut for. Sommige bedieningselementen hebben echter al een eigen naam: de naam van een knop is de tekst ervan en de naam van een verzendknop is de waarde van het attribuut value. Andere elementen, zoals een gewone <div> of een verborgen invoerveld, kunnen op deze manier helemaal geen label krijgen.
<!-- Probleem: de knop zegt al "Save"; het label concurreert ermee -->
<label for="save">Save</label>
<button id="save">Save</button>
Waarom dit belangrijk is
Wanneer een bedieningselement twee bronnen voor zijn naam heeft - de eigen tekst en een label dat ernaar verwijst - lossen verschillende browsers en het conflict verschillend op. Het bedieningselement kan twee keer worden aangekondigd, met de verkeerde tekst worden aangekondigd of onverwacht reageren wanneer op het label wordt geklikt. Door het overbodige label te verwijderen, hoort iedere bezoeker precies wat het bedieningselement zegt.
Zo los je het op
- Verwijder bij knoppen en knopachtige invoervelden het
<label>en vertrouw op de eigen tekst ofvaluevan het bedieningselement:
<!-- Opgelost: de knop benoemt zichzelf -->
<button id="save">Save</button>
<input type="submit" value="Submit">
- Verwijder een label dat naar een verborgen invoerveld verwijst - verborgen velden worden nooit weergegeven of aangekondigd en hebben daarom geen naam nodig.
- Als je een niet-formulierelement, zoals een
<div>die als aangepast bedieningselement fungeert, van een label voorzag, gebruik dan : geef het elementaria-labelledbymet een verwijzing naar de tekst die het benoemt.
Hoe Silktide dit controleert
- Zoek op elke pagina elk
<label>-element met een attribuutfor. - Zoek het element op waarvan de
idovereenkomt. Labels die verwijzen naar niet-bestaande ID's worden hier overgeslagen - ze worden in plaats daarvan gerapporteerd door Geldige label-ID's. - Rapporteer het label wanneer het doel een van de volgende elementen is:
- een
<button>-element, - een
<input>met typebutton,submit,reset,imageofhidden, - elk element dat geen label kan krijgen, zoals een
<div>of een kop.
- een
- Labels die verwijzen naar gewone velden - tekstinvoervelden,
<select>,<textarea>en vergelijkbare elementen - slagen.