Vältä label-elementtejä ohjausobjekteissa, joita ei voi nimetä label-elementillä
Silktide tarkistaa lomakkeiden label-elementit, jotka viittaavat toiseen elementtiin tunnuksen perusteella, ja ilmoittaa label-elementeistä, jotka kohdistuvat elementteihin, joilla ei pitäisi olla sellaista – painikkeisiin, painikkeen kaltaisiin syötteisiin ja elementteihin, joille ei voi liittää label-elementtiä lainkaan. Näiden elementtien nimi määräytyy niiden omasta tekstistä tai arvosta, ja erillinen label-elementti aiheuttaa ristiriitaisia nimiä.
<label> nimeää lomakekentän for-attribuuttinsa avulla. Joillakin ohjausobjekteilla on kuitenkin jo oma nimensä: painikkeen nimi on sen teksti ja lähetystyypin syötteen nimi on sen value. Muita elementtejä, kuten tavallista <div>-elementtiä tai piilotettua syötettä, ei voi nimetä tällä tavalla lainkaan.
<!-- Ongelma: painikkeessa lukee jo "Save"; label-elementti kilpailee sen kanssa -->
<label for="save">Save</label>
<button id="save">Save</button>
Miksi tämä on tärkeää
Kun ohjausobjektilla on kaksi nimilähdettä – sen oma teksti ja siihen viittaava label-elementti – eri selaimet ja ratkaisevat ristiriidan eri tavoin. Ohjausobjekti voidaan ilmoittaa kahdesti, se voidaan ilmoittaa väärällä tekstillä tai se voi toimia odottamattomasti, kun label-elementtiä napsautetaan. Tarpeettoman label-elementin poistaminen varmistaa, että jokainen kävijä kuulee täsmälleen sen, mitä ohjausobjektissa lukee.
Näin korjaat sen
- Poista painikkeista ja painikkeen kaltaisista syötteistä
<label>ja käytä ohjausobjektin omaa tekstiä taivalue-arvoa:
<!-- Korjattu: painike nimeää itsensä -->
<button id="save">Save</button>
<input type="submit" value="Submit">
- Jos label-elementti viittaa piilotettuun syötteeseen, poista label-elementti – piilotettuja kenttiä ei koskaan näytetä tai ilmoiteta, joten ne eivät tarvitse nimeä.
- Jos nimesit muuta kuin lomake-elementtiä, esimerkiksi mukautettuna ohjausobjektina toimivaa
<div>-elementtiä, käytä sen sijaan : anna elementillearia-labelledby, joka viittaa sen nimeävään tekstiin.
Näin Silktide testaa tämän
- Etsi jokaiselta sivulta kaikki
<label>-elementit, joilla onfor-attribuutti. - Hae elementti, jonka
idvastaa sitä. Label-elementit, jotka viittaavat tunnuksiin, joita ei ole olemassa, ohitetaan tässä – niistä ilmoitetaan sen sijaan tarkistuksessa Kelvolliset label-tunnukset. - Ilmoita label-elementistä, kun sen kohde on jokin seuraavista:
<button>-elementti,<input>, jonka tyyppi onbutton,submit,reset,imagetaihidden,- mikä tahansa elementti, jolle ei voi liittää label-elementtiä, kuten
<div>tai otsikko.
- Tavallisiin kenttiin – tekstisyötteisiin,
<select>- ja<textarea>-elementteihin sekä vastaaviin – viittaavat label-elementit hyväksytään.