Kenttien nimikkeet

Silktide tarkistaa, että sivujesi jokaisella lomakekentällä ja painikkeella on nimi, joka ohjelmistot voivat lukea. Ihmiset, jotka eivät näe lomaketta, luottavat näihin nimiin tietääkseen, mitä kukin kenttä pyytää.

Näkevä kävijä päättelee kentän merkityksen sen lähellä olevasta tekstistä. Tällä visuaalisella yhteydellä ei ole merkitystä koodissa: nimi on liitettävä itse kenttään, useimmiten :n <label>-elementillä.

<!-- Ongelma: teksti näyttää nimikkeeltä, mutta sitä ei ole liitetty kenttään -->
<p>Koko nimi</p>
<input type="text">

Miksi tämä on tärkeää

ilmoittaa jokaisen kentän sen , kun kävijä siirtyy lomakkeessa. Nimetön kenttä ilmoitetaan vain tekstinä "muokkaa tekstiä" – kävijän on arvattava asiayhteydestä, mitä siihen kirjoitetaan, ja pidemmässä lomakkeessa tämä käy nopeasti mahdottomaksi. Nimikkeettömät kentät ovat yksi yleisimmistä syistä siihen, ettei lomaketta voi täyttää ilman näköä, mikä tarkoittaa menetettyjä rekisteröitymisiä, tilauksia ja yhteydenottoja.

Näin korjaat sen

Liitä <label> jokaiseen kenttään joko tunnuksella tai ympäröimällä kenttä sillä:

<!-- Liitetty tunnuksella -->
<label for="name">Koko nimi</label>
<input type="text" id="name">

<!-- Tai kentän ympärille -->
<label>Koko nimi <input type="text"></label>

Painikkeet nimeävät itsensä tekstillään tai value-arvollaan – label-elementtiä ei tarvita:

<button>Lähetä viesti</button>
<input type="submit" value="Lähetä viesti">

Jos näkyvä nimike ei ole käytännöllinen, käytä -attribuuttia, kuten aria-label tai aria-labelledby. Huomaa, että tämä auttaa vain – näkevät kävijät eivät näe sitä.

Älä käytä placeholder-tekstiä nimikkeenä: se katoaa heti, kun kävijä alkaa kirjoittaa, eikä sitä käsitellä johdonmukaisesti nimenä.

Miten Silktide testaa tämän

Etsi kunkin sivun lomakeohjausobjektit: syötekentät, tekstialueet, pudotusvalikot ja painikkeet sekä elementit, joille on annettu ARIA:lla lomakeohjausobjektin rooli (kuten role="button" tai role="checkbox").
Ohita ohjausobjektit, jotka eivät tarvitse nimeä: piilotetut syötekentät, tunnettujen kolmannen osapuolen pienoissovellusten lisäämät kentät (kuten -palvelut tai piilotetut lomakkeet, joita seuranta- ja käännöskomentosarjat lisäävät omaa käyttöään varten) sekä elementit, joiden ARIA-rooli ei edellytä nimikettä.
Selvitä kunkin ohjausobjektin saavutettava nimi sen nimikkeestä, ARIA-attribuuteista, painiketekstistä tai arvosta.
Ilmoita jokainen ohjausobjekti, jonka saavutettava nimi on tyhjä.

Vianmääritys

Kentän vieressä on tekstiä

Läheinen teksti ei nimeä kenttää, ellei sitä ole yhdistetty koodissa – käytä <label>-elementtiä for-attribuutilla tai ympäröi kenttä nimikkeellä.

Kenttä on koristeellinen tai lisäosan hallitsema

Pienoissovellusten lisäämiä kenttiä, joita et hallitse, voi olla vaikea korjata suoraan. Tarkista, tarjoaako lisäosa saavutettavuusasetuksen tai päivityksen. Jos kenttä ei aidosti vaikuta kävijöihin, voit löydöksen.