Standarder · ARIA

Roll Widget

textbox

Markerar ett element som ett en- eller flerlinjigt textinmatningsfält. Använd <input type="text"> eller <textarea> i första hand — de hanterar allt textbox-beteende direkt. Välj role="textbox" bara när du bygger en rik textredigerare på ett contenteditable-element.

När ska du använda det

Använd <input type="text">, <input type="email">, <input type="url">, <input type="tel"> eller <textarea> — det alternativ som passar inmatningens semantik. Det inbyggda elementet hanterar markering, markören, IME-komposition, formulärinlämning, autocomplettoken och validering, vilket är mycket svårt att återskapa.

role="textbox" är lämpligt på en typ av element: en contenteditable div som är värd för en rik textredigerare. Rollen talar om för hjälpmedelstek­niken att exponera den som ett redigerbart område i stället för en generisk behållare. Ange aria-multiline="true" om redigeraren accepterar flera rader.

Om din “textbox” behöver autocompletförslag, använd role="combobox" på inmatningsfältet i stället — textbox äger ingen popup.

Vanliga fel

  • role="textbox" applicerat på en <div> som INTE är contenteditable. Rollen presenterar ett redigerbart fält men tangentbordsinmatning gör ingenting.
  • Anpassade textrutor utan kopplad <label for> eller aria-label — fältet saknar tillgängligt namn.
  • placeholder används som enda etikett. Platshållaren försvinner vid fokus, har otillräcklig kontrast i många teman och är inte ett tillgängligt namn.
  • role="textbox" på ett enlinjigt contenteditable-element som inte rensar inklistrade radbrytningar. Användare klistrar in innehåll med radbrytningar som kringgår den visuella begränsningen.
  • aria-multiline="true" saknas på en flerlinjig contenteditable-redigerare — skärmläsare presenterar den som ett enlinjigt inmatningsfält.

Exempel

<!-- Rekommenderat -->
<label for="bio">Kort bio</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Rik textredigerare -->
<label id="commentLabel">Kommentar</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>