form

Käyttötilanteet

Merkittävän lomakkeen ympärille — rekisteröinti, kassasivu, yhteydenotto, profiilin muokkaus — joka ansaitsee tulla navigoitavaksi maamerkkinä. Kuten region, <form>-elementti korotetaan lomakemaamerkiksi VAIN, kun sillä on saavutettava nimi (aria-label tai aria-labelledby).

Lomakkeen saavutettavan nimen tulisi kuvata sen tarkoitusta: “Yhteydenottolomake”, “Rekisteröidy”, “Muokkaa profiilia”. Vältettäkön yleistä “Lomake” — se on roolin ilmoituksen kanssa päällekkäinen.

Jos lomake on hakukenttä, käytetään <search>-elementtiä (tai role="search") — hakumaamerkki on tarkempi.

Yksikenttäinen uutiskirjeen tilauslomake tai hakukenttä ei oikeuta lomakemaamerkiksi. Se varataan lomakkeille, joissa on vähintään kolme merkityksellistä syöttökenttää ja selkeä tarkoitus.

Nimeäminen

Aina — ilman nimeä <form> ei muodostu maamerkiksi. Jos sivulla on useita lomakkeita (kommenttilomake JA uutiskirjeen tilaus), jokaisella ON oltava erillinen nimi.

aria-labelledby, joka osoittaa näkyvään otsikkoon, on suositeltavampaa kuin aria-label, koska se yhdistää näkyvän otsikon maamerkki-ilmoitukseen.

Yleisimmät virheet

• <form> ilman aria-label- tai aria-labelledby-attribuuttia. Ei maamerkki. Käyttäjät eivät pysty siirtymään siihen maamerkkinavigoinnilla.
• aria-label="Lomake" — päällekkäinen.
• <form role="search"> yhdistettynä aria-label="Haku"-attribuuttiin. Hakumaamerkki kattaa sen jo; form-rooli aiheuttaisi ristiriidan.
• Kirjautumis- ja rekisteröintilomakkeet molemmat merkitty “Kirjaudu sisään” — mahdotonta erottaa maamerkki-valikossa.
• Yhden syöttökentän ympäröiminen <form>-elementillä ja sen merkitseminen lomakemaamerkiksi. Ylipanotettu; maamerkki ei lisää arvoa.

Esimerkki

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Ota yhteyttä</h2>
  <label>Nimi <input type="text" name="name" required></label>
  <label>Sähköposti <input type="email" name="email" required></label>
  <label>Viesti <textarea name="message" required></textarea></label>
  <button type="submit">Lähetä</button>
</form>