Normen · ARIA

Rol Widget

textbox

Markeert een element als enkelvoudige of meervoudige tekstinvoer. Gebruik eerst <input type="text"> of <textarea> — zij regelen elk tekstbox­gedrag automatisch. Kies role="textbox" alleen voor een rich-text­editor op een contenteditable-element.

Wanneer gebruiken

Gebruik <input type="text">, <input type="email">, <input type="url">, <input type="tel"> of <textarea> — degene die bij de invoersemantiek past. Native elementen regelen selectie, de cursor, IME-samenstelling, formulier­verzending, autocomplete-tokens en validatie, die allemaal zeer moeilijk na te bouwen zijn.

role="textbox" is geschikt voor één type element: een contenteditable-div die een rich-text­editor herbergt. De rol instrueert hulptechnologie het element als een bewerkbaar gebied te beschouwen in plaats van als een generieke container. Stel aria-multiline="true" in als de editor meerdere regels accepteert.

Als de “tekstbox” autoaanvulsugggesties nodig heeft, gebruik dan role="combobox" op de invoer — textbox bezit geen pop-up.

Veelvoorkomende fouten

  • role="textbox" toegepast op een <div> die NIET contenteditable is. De rol kondigt een bewerkbaar veld aan, maar typen doet niets.
  • Maatwerk­tekstboxen zonder gekoppelde <label for> of aria-label — het veld heeft geen toegankelijke naam.
  • placeholder als enig label gebruiken. De placeholder verdwijnt bij focus, heeft voor veel thema’s onvoldoende contrast en is geen toegankelijke naam.
  • role="textbox" op een enkelvoudige contenteditable die geplakte regeleinden niet verwijdert. Gebruikers plakken inhoud met nieuwe regels die de visuele beperking omzeilen.
  • aria-multiline="true" ontbreekt op een meervoudige contenteditable-editor — schermlezers kondigen het aan als enkelvoudige invoer.

Voorbeeld

<!-- Voorkeur -->
<label for="bio">Korte biografie</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

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