Rolle Widget

`textbox`

Markerer et element som en enkelt- eller flerlinjet tekstinput. Brug <input type="text"> eller <textarea> i første omgang — de håndterer al textbox-adfærd gratis. Grib kun efter role="textbox", når du bygger en rich text-editor på et contenteditable-element.

Hvornår bruges det

Brug <input type="text">, <input type="email">, <input type="url">, <input type="tel"> eller <textarea> — det, der passer til inputsemantikken. Native håndterer selektion, markøren, IME-komposition, formularimindsendelse, autocompletion-tokens og validering, som alle er meget svære at genskabe.

role="textbox" er passende på én type element: en contenteditable-div, der hoster en rich text-editor. Rollen fortæller hjælpeteknologi, at den skal eksponere den som en redigerbar region frem for en generisk beholder. Sæt aria-multiline="true", hvis editoren accepterer flere linjer.

Hvis din “textbox” skal have autocompletion-forslag, brug role="combobox" på inputtet i stedet — textbox ejer ikke en popup.

Typiske fejl

role="textbox" anvendt på en <div>, der IKKE er contenteditable. Rollen annoncerer et redigerbart felt, men tastetryk gør ingenting.
Brugerdefinerede textboxes uden et parret <label for> eller aria-label — feltet har intet tilgængeligt navn.
Brug af placeholder som det eneste label. Placeholder forsvinder ved fokus, fejler kontrast i mange temaer og er ikke et tilgængeligt navn.
role="textbox" på en enkeltlinje-contenteditable, der ikke fjerner indsatte linjeskift. Brugere indsætter indhold med linjeskift, der omgår den visuelle begrænsning.
Manglende aria-multiline="true" på en flerlinjet contenteditable-editor — skærmlæsere annoncerer den som enkeltlinje-input.

Eksempel

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

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