Validación HTML: Valor incorrecto "X aria-required=" para el atributo "maxlength" en el elemento "input": Se esperaba un dígito pero se encontró " " en su lugar.

Acerca de este problema HTML

Cuando escribes un atributo como maxlength="200 y accidentalmente omites la comilla de cierre, todo lo que sigue — incluyendo nombres de atributos posteriores y sus valores — se absorbe en el valor de ese único atributo. En este caso, el validador ve el valor de maxlength como 200 aria-required= (o similar), que no es un entero válido. El analizador no encuentra una " de cierre hasta que encuentra la siguiente comilla más adelante en la etiqueta, causando una cascada de errores.

Esto es un problema por varias razones:

Funcionalidad rota: El atributo maxlength no funcionará porque 200 aria-required= no es un número válido. El navegador no puede determinar el límite de caracteres pretendido.
Atributos perdidos: El atributo aria-required se absorbe en el valor malformado de maxlength, por lo que nunca se aplica como un atributo separado. Las tecnologías de asistencia como los lectores de pantalla no sabrán que el campo es obligatorio.
Impacto en la accesibilidad: Dado que se pierde aria-required="true", los usuarios que dependen de lectores de pantalla no recibirán la información de que el campo es obligatorio, potencialmente llevando a errores en el envío del formulario y una experiencia frustrante.

La causa raíz es casi siempre una comilla de cierre faltante. Verifica cuidadosamente que cada valor de atributo tenga tanto una " de apertura como de cierre. Este tipo de error tipográfico es fácil de cometer y fácil de pasar por alto, especialmente en etiquetas largas con muchos atributos.

Ejemplos

Incorrecto — falta la comilla de cierre en `maxlength`

La " de cierre después de 200 falta, por lo que el valor de maxlength se extiende hasta la siguiente comilla que encuentra:

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

El validador interpreta maxlength como teniendo el valor 200 aria-required=, y solo true termina como el valor de un atributo no pretendido o malformado. Nada funciona como se esperaba.

Correcto — atributos correctamente entrecomillados

Cada atributo tiene su propio par de comillas correctamente emparejadas:

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

Aquí, maxlength="200" limita correctamente la entrada a 200 caracteres, y aria-required="true" es un atributo separado que dice a las tecnologías de asistencia que el campo es obligatorio.

Incorrecto — falta la comilla de cierre con más atributos

Este problema puede ocurrir con cualquier combinación de atributos. Aquí, una comilla faltante después de maxlength absorbe class y placeholder:

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

Correcto — todas las comillas correctamente cerradas

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

Consejos para evitar este problema

Usa un editor de código con resaltado de sintaxis. La mayoría de editores colorean los valores de atributos de manera diferente a los nombres de atributos. Si ves un nombre de atributo renderizado en el mismo color que una cadena de valor, probablemente falta una comilla.
Formatea los atributos uno por línea en elementos complejos. Esto hace mucho más fácil detectar comillas desemparejadas:

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

Valida temprano y frecuentemente. Ejecutar tu HTML a través del validador W3C regularmente ayuda a detectar estos pequeños errores tipográficos antes de que causen errores confusos en producción.