Valor inválido “textbox” para o atributo “role” no elemento “li”.

O papel ARIA textbox identifica um elemento que permite entrada de texto livre. Embora possa tecnicamente ser aplicado a elementos usando contenteditable, não deve ser colocado em elementos que já carregam um significado semântico forte, como <li>. Um item de lista é esperado ser filho de <ul>, <ol>, ou <menu>, e o seu papel implícito listitem comunica o seu propósito dentro de uma estrutura de lista às tecnologias assistivas. Atribuir role="textbox" a um <li> substitui esta semântica, confundindo leitores de ecrã e outras ferramentas assistivas sobre se o elemento é um item de lista ou um campo de entrada de texto.

Isto é problemático por várias razões:

• Acessibilidade: Os leitores de ecrã dependem de papéis para transmitir o propósito dos elementos aos utilizadores. Um <li> com role="textbox" envia sinais contraditórios — existe dentro de uma estrutura de lista mas anuncia-se como uma entrada de texto.
• Conformidade com normas: A especificação ARIA in HTML restringe que papéis podem ser aplicados a elementos específicos. O elemento li não permite o papel textbox, razão pela qual o validador W3C sinaliza isto como um erro.
• Comportamento do navegador: Os navegadores podem lidar com a semântica conflituosa de forma imprevisível, levando a experiências inconsistentes em diferentes agentes de utilizador.

A melhor abordagem é usar elementos de formulário HTML nativos sempre que possível. O elemento <input type="text"> lida com entrada de texto de linha única, e o elemento <textarea> lida com entrada de múltiplas linhas. Estes elementos nativos vêm com suporte de teclado integrado, gestão de foco e comportamento de submissão de formulário — nada do qual obtém gratuitamente com um role="textbox" num elemento não-formulário.

Se realmente precisar de uma área editável dentro de uma lista e não puder usar elementos de formulário nativos, aninhе um <div> ou <span> com role="textbox" dentro do <li> em vez de colocar o papel no próprio <li>.

Exemplos

❌ Incorreto: role="textbox" num elemento li

<ul>
  <li role="textbox" contenteditable="true">Editar este item</li>
  <li role="textbox" contenteditable="true">Editar este item também</li>
</ul>

Isto desencadeia o erro do validador porque textbox não é um papel válido para <li>.

✅ Correção: usar elementos de formulário nativos

A correção mais simples e robusta é usar controlos de formulário padrão:

<ul>
  <li>
    <label for="item1">Item 1:</label>
    <input type="text" id="item1" value="Editar este item">
  </li>
  <li>
    <label for="item2">Item 2:</label>
    <input type="text" id="item2" value="Editar este item também">
  </li>
</ul>

Para entrada de múltiplas linhas, use <textarea>:

<ul>
  <li>
    <label for="note1">Nota:</label>
    <textarea id="note1">Editar este conteúdo</textarea>
  </li>
</ul>

✅ Correção: aninhar um div com role="textbox" dentro do li

Se precisar de uma área contenteditable e não puder usar elementos de formulário nativos, coloque o papel textbox num elemento aninhado:

<ul>
  <li>
    <div id="label1">Item 1:</div>
    <div
      role="textbox"
      contenteditable="true"
      aria-labelledby="label1"
      aria-placeholder="Inserir texto">
      Editar este item
    </div>
  </li>
</ul>

Isto preserva o papel implícito listitem do elemento <li> enquanto atribui corretamente o papel textbox a um <div> semanticamente neutro.

✅ Correção: remover a estrutura de lista inteiramente

Se os itens não são verdadeiramente uma lista, considere abandonar completamente a estrutura <ul>/<li>:

<div id="zipLabel">Insira o seu código postal de cinco dígitos</div>
<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="Código postal de 5 dígitos"
  aria-labelledby="zipLabel">
</div>

Em todos os casos, prefira elementos <input> e <textarea> nativos em vez de role="textbox" com contenteditable. Os elementos nativos fornecem comportamento acessível por defeito, incluindo interação de teclado, validação de formulário e gestão adequada de foco, sem necessitar de atributos ARIA adicionais ou JavaScript.

Saiba mais:

MDN Reference

MDN: textbox role

→