Verificação HTML: Valor inválido "X aria-required=" para o atributo "maxlength" no elemento "input": Esperava-se um dígito mas encontrou-se " " em vez disso.

Sobre este problema HTML

Quando escreve um atributo como maxlength="200 e se esquece acidentalmente da aspa de fecho, tudo o que se segue — incluindo nomes de atributos subsequentes e os seus valores — fica absorvido no valor desse único atributo. Neste caso, o validador vê o valor de maxlength como 200 aria-required= (ou similar), que não é um inteiro válido. O parser não encontra uma " de fecho até encontrar a próxima aspa mais à frente na tag, causando uma cascata de erros.

Isto é um problema por várias razões:

Funcionalidade quebrada: O atributo maxlength não funcionará porque 200 aria-required= não é um número válido. O navegador não consegue determinar o limite de caracteres pretendido.
Atributos perdidos: O atributo aria-required é engolido no valor malformado de maxlength, por isso nunca é aplicado como um atributo separado. Tecnologias assistivas como leitores de ecrã não saberão que o campo é obrigatório.
Impacto na acessibilidade: Como aria-required="true" se perde, utilizadores que dependem de leitores de ecrã não receberão a informação de que o campo é obrigatório, potencialmente levando a erros no envio do formulário e a uma experiência frustrante.

A causa raiz é quase sempre uma aspa de fecho em falta. Verifique cuidadosamente que todos os valores de atributos têm tanto uma " de abertura como de fecho. Este tipo de erro tipográfico é fácil de cometer e fácil de não notar, especialmente em tags longas com muitos atributos.

Exemplos

Incorreto — falta aspa de fecho em `maxlength`

A " de fecho após 200 está em falta, por isso o valor de maxlength estende-se até à próxima aspa que encontra:

<input type="text" name="nome" id="nome" maxlength="200 aria-required="true">

O validador interpreta maxlength como tendo o valor 200 aria-required=, e apenas true acaba como valor de um atributo não pretendido ou malformado. Nada funciona como esperado.

Correto — atributos devidamente entre aspas

Cada atributo tem o seu próprio par de aspas devidamente emparelhadas:

<input type="text" name="nome" id="nome" maxlength="200" aria-required="true">

Aqui, maxlength="200" limita corretamente o input a 200 caracteres, e aria-required="true" é um atributo separado que informa as tecnologias assistivas de que o campo é obrigatório.

Incorreto — falta aspa de fecho com mais atributos

Este problema pode acontecer com qualquer combinação de atributos. Aqui, uma aspa em falta após maxlength absorve class e placeholder:

<input type="text" maxlength="50 class="username" placeholder="Enter name">

Correto — todas as aspas devidamente fechadas

<input type="text" maxlength="50" class="username" placeholder="Enter name">

Dicas para evitar este problema

Use um editor de código com realce de sintaxe. A maioria dos editores colore valores de atributos de forma diferente dos nomes de atributos. Se vir um nome de atributo renderizado na mesma cor que uma string de valor, provavelmente falta uma aspa.
Formate atributos um por linha em elementos complexos. Isto torna muito mais fácil detetar aspas não emparelhadas:

<input
  type="text"
  name="nome"
  id="nome"
  maxlength="200"
  aria-required="true">

Valide cedo e frequentemente. Passar o seu HTML pelo validador W3C regularmente ajuda a apanhar estes pequenos erros tipográficos antes de causarem bugs confusos em produção.