textbox

Milloin käyttää

Käytä <input type="text">, <input type="email">, <input type="url">, <input type="tel"> tai <textarea> — kumpi tahansa vastaa syötteen semantiikkaa. Natiivielementti hoitaa valinnan, kursorin, IME-koostuksen, lomakkeen lähetyksen, automaattisen täydennyksen ja validoinnin, joita kaikkia on erittäin vaikea toteuttaa uudelleen.

role="textbox" sopii yhteen elementtityypistä: contenteditable-diviin, jossa on rich-text-editori. Rooli kertoo avustavalle teknologialle, että elementti tulee paljastaa muokattavana alueena eikä yleisenä säilönä. Aseta aria-multiline="true", jos editori hyväksyy useita rivejä.

Jos “tekstikenttäsi” tarvitsee automaattisen täydennyksen ehdotuksia, käytä syötteessä role="combobox" — textbox ei omista ponnahdusikkunaa.

Yleiset virheet

• role="textbox" sovellettuna <div>-elementtiin, joka EI ole contenteditable. Rooli ilmoittaa muokattavan kentän, mutta kirjoittaminen ei tee mitään.
• Mukautetut tekstikentät ilman paritettu <label for> tai aria-label — kentällä ei ole saavutettavaa nimeä.
• placeholder-attribuutin käyttäminen ainoana tunnistetekstinä. Placeholder häviää kohdistuksen yhteydessä, epäonnistuu värikontrastissa monissa teemoissa eikä ole saavutettava nimi.
• role="textbox" yksirivisessä contenteditable-elementissä, joka ei poista liitetyistä sisällöistä rivinvaihtoja. Käyttäjät liittävät sisältöä rivinvaihdoilla, jotka ohittavat visuaalisen rajoituksen.
• Puuttuva aria-multiline="true" monirivisessä contenteditable-editorissa — ruudunlukuohjelmat ilmoittavat sen yksirivisenä syötteenä.

Esimerkki

<!-- Suositeltava -->
<label for="bio">Lyhyt esittely</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Rich-text-editori -->
<label id="commentLabel">Kommentti</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>