Verificação HTML: Elemento "div" está em falta com um ou mais dos seguintes atributos: "aria-expanded", "aria-valuemax", "aria-valuemin", "aria-valuenow", "role".

Sobre este problema HTML

O atributo aria-required informa as tecnologias de apoio que um campo de formulário deve ser preenchido antes do formulário poder ser submetido. No entanto, este atributo só é válido em elementos que funcionem como widgets interativos. Um div simples não tem um papel ARIA implícito, por isso as tecnologias de apoio não têm contexto sobre que tipo de entrada é esperada. O validador sinaliza isto porque um atributo aria-required num div genérico é efetivamente sem significado sem atributos ARIA adicionais que definam o papel e comportamento do elemento.

Isto é importante por várias razões:

Acessibilidade: Os leitores de ecrã e outras tecnologias de apoio dependem de papéis para compreender como apresentar um elemento aos utilizadores. Sem um papel, aria-required fornece informação incompleta.
Conformidade com padrões: A especificação WAI-ARIA define quais atributos são permitidos em quais papéis. Usar aria-required sem um papel estabelecido viola estas restrições.
Comportamento do navegador: Os navegadores podem ignorar ou interpretar mal atributos ARIA quando aparecem em elementos que carecem do contexto de papel apropriado.

Como corrigir

Opção 1: Usar HTML semântico nativo (preferível)

Sempre que possível, use elementos de formulário HTML nativos. Eles vêm com semântica de acessibilidade incorporada, interação por teclado, e validação — não é necessário ARIA.

Substitua um div com aria-required="true" por um controlo de formulário apropriado usando o atributo nativo required:

<input type="text" required>
<select required>
  <option value="">Escolha uma</option>
  <option value="1">Opção 1</option>
</select>
<textarea required></textarea>

Opção 2: Adicionar um atributo `role` apropriado

Quando deve usar um div como um widget personalizado (estilizado e melhorado com CSS e JavaScript), adicione o atributo role correto para lhe dar significado semântico. Escolha o papel que corresponda ao comportamento real do widget — não escolha um arbitrariamente.

Papéis comuns que suportam aria-required:

combobox — um dropdown personalizado com entrada de texto
listbox — uma lista de seleção personalizada
radiogroup — um grupo de opções tipo botão de rádio
spinbutton — um incrementador numérico (também requer aria-valuemax, aria-valuemin, e aria-valuenow)
textbox — uma entrada de texto personalizada

Opção 3: Adicionar outros atributos ARIA qualificados

Para certos widgets como sliders ou spinbuttons, pode precisar de aria-valuemax, aria-valuemin, e aria-valuenow além de (ou como parte de) definir o papel. Estes atributos estabelecem inerentemente um contexto de widget.

Exemplos

❌ Inválido: `aria-required` num `div` simples

<div aria-required="true">
  <div data-value="One">1</div>
  <div data-value="Two">2</div>
  <div data-value="Three">3</div>
</div>

Isto desencadeia o erro de validação porque o div não tem papel ou outros atributos ARIA para definir que tipo de widget é.

✅ Corrigido: Adicionar o `role` apropriado

<div aria-required="true" role="radiogroup" aria-label="Escolha um número">
  <div role="radio" aria-checked="false" tabindex="0">1</div>
  <div role="radio" aria-checked="false" tabindex="0">2</div>
  <div role="radio" aria-checked="false" tabindex="0">3</div>
</div>

Adicionar role="radiogroup" dá ao div uma identidade semântica. Note que os elementos filhos também precisam de papéis e atributos apropriados para o widget ser totalmente acessível.

✅ Corrigido: Usar HTML nativo em vez disso

<fieldset>
  <legend>Escolha um número</legend>
  <label><input type="radio" name="number" value="1" required> 1</label>
  <label><input type="radio" name="number" value="2"> 2</label>
  <label><input type="radio" name="number" value="3"> 3</label>
</fieldset>

Esta abordagem usa botões de rádio nativos com o atributo required, eliminando completamente a necessidade de ARIA. O navegador trata da acessibilidade, navegação por teclado, e validação de formulário automaticamente.

✅ Corrigido: Um spinbutton personalizado com atributos de valor

<div role="spinbutton"
  aria-required="true"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  aria-label="Quantidade"
  tabindex="0">
  50
</div>

Para um papel spinbutton, deve também fornecer aria-valuemin, aria-valuemax, e aria-valuenow para descrever completamente o estado do widget.