Normativas · ARIA

Rol Control

textbox

Marca un elemento como campo de texto de una o varias líneas. Se recomienda usar <input type="text"> o <textarea> en primer lugar — gestionan todos los comportamientos del cuadro de texto de forma nativa. Recurra a role="textbox" solo al construir un editor de texto enriquecido sobre un elemento contenteditable.

Cuándo utilizarlo

Use <input type="text">, <input type="email">, <input type="url">, <input type="tel"> o <textarea> — el que mejor se ajuste a la semántica del campo. Los elementos nativos gestionan la selección, el cursor, la composición IME, el envío de formularios, los tokens de autocompletado y la validación, aspectos muy difíciles de recrear manualmente.

role="textbox" resulta apropiado en un único caso: un <div> con contenteditable que aloja un editor de texto enriquecido. El rol indica a las tecnologías de asistencia que deben exponerlo como una región editable en lugar de un contenedor genérico. Establezca aria-multiline="true" si el editor acepta varias líneas.

Si su «textbox» necesita sugerencias de autocompletado, utilice role="combobox" en el campo de entrada en su lugar — textbox no controla ningún popup.

Errores frecuentes

  • role="textbox" aplicado a un <div> que NO tiene contenteditable. El rol anuncia un campo editable, pero escribir en él no produce ningún efecto.
  • Cuadros de texto personalizados sin un <label for> o aria-label asociado — el campo carece de nombre accesible.
  • Usar placeholder como único etiquetado. El marcador de posición desaparece al recibir el foco, no supera el contraste requerido en muchos temas y no constituye un nombre accesible.
  • role="textbox" en un contenteditable de una sola línea que no elimina los saltos de línea pegados. Los usuarios pueden pegar contenido con saltos de línea que sortean la restricción visual.
  • Omitir aria-multiline="true" en un editor contenteditable de varias líneas — los lectores de pantalla lo anuncian como un campo de entrada de una sola línea.

Ejemplo

<!-- Opción preferida -->
<label for="bio">Breve biografía</label>
<textarea id="bio" rows="4" maxlength="240"></textarea>

<!-- Editor de texto enriquecido -->
<label id="commentLabel">Comentario</label>
<div
  role="textbox"
  contenteditable="true"
  aria-labelledby="commentLabel"
  aria-multiline="true"
></div>