Valor incorrecto “textbox” para el atributo “role” en el elemento “li”.

El role ARIA textbox identifica un elemento que permite la entrada de texto libre. Aunque técnicamente se puede aplicar a elementos usando contenteditable, no debería colocarse en elementos que ya tienen un significado semántico fuerte, como <li>. Se espera que un elemento de lista sea hijo de <ul>, <ol>, o <menu>, y su role implícito listitem comunica su propósito dentro de una estructura de lista a las tecnologías asistivas. Asignar role="textbox" a un <li> sobrescribe esta semántica, confundiendo a los lectores de pantalla y otras herramientas asistivas sobre si el elemento es un elemento de lista o un campo de entrada de texto.

Esto es problemático por varias razones:

• Accesibilidad: Los lectores de pantalla dependen de los roles para transmitir el propósito de los elementos a los usuarios. Un <li> con role="textbox" envía señales mixtas — existe dentro de una estructura de lista pero se anuncia como una entrada de texto.
• Cumplimiento de estándares: La especificación ARIA en HTML restringe qué roles pueden aplicarse a elementos específicos. El elemento li no permite el role textbox, razón por la cual el validador W3C marca esto como un error.
• Comportamiento del navegador: Los navegadores pueden manejar las semánticas conflictivas de manera impredecible, llevando a experiencias inconsistentes entre diferentes user agents.

El mejor enfoque es usar elementos de formulario HTML nativos siempre que sea posible. El elemento <input type="text"> maneja la entrada de texto de una sola línea, y el elemento <textarea> maneja la entrada de múltiples líneas. Estos elementos nativos vienen con soporte de teclado integrado, gestión del foco y comportamiento de envío de formularios — nada de lo cual obtienes gratis con un role="textbox" en un elemento que no sea de formulario.

Si realmente necesitas un área editable dentro de una lista y no puedes usar elementos de formulario nativos, anida un <div> o <span> con role="textbox" dentro del <li> en lugar de colocar el role en el <li> mismo.

Ejemplos

❌ Incorrecto: role="textbox" en un elemento li

<ul>
  <li role="textbox" contenteditable="true">Edit this item</li>
  <li role="textbox" contenteditable="true">Edit this item too</li>
</ul>

Esto activa el error del validador porque textbox no es un role válido para <li>.

✅ Solución: Usar elementos de formulario nativos

La solución más simple y robusta es usar controles de formulario estándar:

<ul>
  <li>
    <label for="item1">Item 1:</label>
    <input type="text" id="item1" value="Edit this item">
  </li>
  <li>
    <label for="item2">Item 2:</label>
    <input type="text" id="item2" value="Edit this item too">
  </li>
</ul>

Para entrada de múltiples líneas, usa <textarea>:

<ul>
  <li>
    <label for="note1">Note:</label>
    <textarea id="note1">Edit this content</textarea>
  </li>
</ul>

✅ Solución: Anidar un div con role="textbox" dentro del li

Si necesitas un área contenteditable y no puedes usar elementos de formulario nativos, coloca el role textbox en un elemento anidado:

<ul>
  <li>
    <div id="label1">Item 1:</div>
    <div
      role="textbox"
      contenteditable="true"
      aria-labelledby="label1"
      aria-placeholder="Enter text">
      Edit this item
    </div>
  </li>
</ul>

Esto preserva el role implícito listitem del elemento <li> mientras asigna correctamente el role textbox a un <div> semánticamente neutro.

✅ Solución: Eliminar completamente la estructura de lista

Si los elementos no son realmente una lista, considera eliminar completamente la estructura <ul>/<li>:

<div id="zipLabel">Enter your five-digit zipcode</div>
<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="5-digit zipcode"
  aria-labelledby="zipLabel">
</div>

En todos los casos, prefiere los elementos nativos <input> y <textarea> sobre role="textbox" con contenteditable. Los elementos nativos proporcionan comportamiento accesible por defecto, incluyendo interacción con teclado, validación de formularios y gestión del foco adecuada, sin requerir atributos ARIA adicionales o JavaScript.

Más información:

MDN Reference

MDN: textbox role

→