Normative · ARIA

Ruolo Widget

textbox

Contrassegna un elemento come campo di testo a riga singola o multipla. Utilizzare prima <input type="text"> o <textarea> — gestiscono gratuitamente ogni comportamento del textbox. Ricorrere a role="textbox" solo quando si costruisce un editor di testo avanzato su un elemento contenteditable.

Quando utilizzarlo

Utilizzare <input type="text">, <input type="email">, <input type="url">, <input type="tel"> o <textarea> — a seconda delle esigenze semantiche del campo. Gli elementi nativi gestiscono la selezione, il cursore, la composizione IME, l’invio del modulo, i token di completamento automatico e la validazione, tutti aspetti molto difficili da ricreare da zero.

role="textbox" è appropriato su un solo tipo di elemento: un <div> con attributo contenteditable che ospita un editor di testo avanzato. Il ruolo indica alla tecnologia assistiva di esporlo come area modificabile anziché come un contenitore generico. È necessario impostare aria-multiline="true" se l’editor accetta più righe.

Se il campo di testo richiede suggerimenti di completamento automatico, occorre utilizzare role="combobox" sull’input — textbox non gestisce un popup.

Errori comuni

  • role="textbox" applicato a un <div> che NON è contenteditable. Il ruolo annuncia un campo modificabile, ma la digitazione non produce alcun effetto.
  • Textbox personalizzati privi di un <label for> o aria-label associato — il campo non ha un nome accessibile.
  • Utilizzo di placeholder come unica etichetta. Il placeholder scompare al focus, non supera i requisiti di contrasto per molti temi e non costituisce un nome accessibile.
  • role="textbox" su un elemento contenteditable a riga singola che non rimuove le interruzioni di riga incollate. Gli utenti incollano contenuto con a capo che aggira il vincolo visivo.
  • aria-multiline="true" mancante su un editor contenteditable multiriga — gli screen reader lo annunciano come campo a riga singola.

Esempio

<!-- Preferito -->
<label for="bio">Breve biografia</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Editor di testo avanzato -->
<label id="commentLabel">Commento</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>