Validación HTML: El elemento "span" carece de uno o más de los siguientes atributos: "aria-expanded", "aria-valuemax", "aria-valuemin", "aria-valuenow", "role".

Acerca de este problema HTML

El elemento span es un contenedor en línea genérico sin semántica inherente. Por sí solo, no tiene significado para las tecnologías de asistencia. Cuando agregas atributos ARIA como aria-expanded o aria-valuenow a un span, estás indicando que el elemento representa un widget interactivo, pero el validador (y las tecnologías de asistencia) necesitan más contexto. Muchos atributos ARIA solo están permitidos en elementos que tienen ciertos roles, y algunos roles requieren un conjunto específico de atributos para funcionar correctamente.

Por ejemplo, aria-valuenow está diseñado para widgets de rango como deslizadores y barras de progreso. Según la especificación WAI-ARIA, si usas aria-valuenow, el elemento también debe tener aria-valuemin, aria-valuemax, y un role como progressbar, slider, meter, o scrollbar. De manera similar, aria-expanded está destinado a elementos con roles como button, combobox, link, o treeitem. Colocar estos atributos en un span sin el role correspondiente viola las reglas ARIA y activa este error de validación.

Esto importa por varias razones:

Accesibilidad: Los lectores de pantalla dependen del role para determinar cómo presentar un widget a los usuarios. Sin él, los atributos de estado ARIA se vuelven sin sentido o confusos.
Cumplimiento de estándares: La especificación HTML integra las reglas ARIA, y los validadores hacen cumplir que los atributos ARIA se usen en combinaciones válidas.
Comportamiento del navegador: Los navegadores usan el role para construir el árbol de accesibilidad. Un span con aria-valuenow pero sin role puede ser ignorado o mal representado para los usuarios de tecnologías de asistencia.

Cómo solucionarlo

Agrega el role correcto al span, junto con todos los atributos requeridos por ese role.
Usa un elemento HTML semántico en lugar de un span cuando exista uno (p. ej., <progress> o <button>).
Elimina atributos ARIA innecesarios si el span es puramente decorativo o los atributos fueron agregados por error.

Si tu span es puramente visual (p. ej., un asterisco decorativo para campos obligatorios), no agregues atributos ARIA relacionados con el estado. En su lugar, usa aria-hidden="true" para ocultarlo de las tecnologías de asistencia, y coloca los atributos ARIA en el control de formulario real.

Ejemplos

Incorrecto: `aria-expanded` en un `span` sin role

<span aria-expanded="false">Menu</span>

El validador reporta el role faltante porque aria-expanded no es válido en un span genérico.

Correcto: agregar un `role` (o usar un `button`)

<span role="button" tabindex="0" aria-expanded="false">Menu</span>

O, mejor aún, usar un elemento button real:

<button aria-expanded="false">Menu</button>

Incorrecto: `aria-valuenow` sin el conjunto completo de atributos de rango y role

<span class="progress-indicator" aria-valuenow="50">50%</span>

Correcto: incluir el `role` y todos los atributos de rango requeridos

<span role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  50%
</span>

O usar el elemento nativo <progress>, que tiene semántica incorporada:

<progress value="50" max="100">50%</progress>

Incorrecto: `aria-required` en un span decorativo

<label for="email">
  Email
  <span class="required" aria-required="true">*</span>
</label>
<input id="email" name="email" type="email">

El atributo aria-required pertenece al control de formulario, no al asterisco decorativo.

Correcto: ocultar el indicador decorativo y marcar el input como obligatorio

<label for="email">
  Email
  <span class="required" aria-hidden="true">*</span>
</label>
<input id="email" name="email" type="email" aria-required="true">

Si también quieres que los lectores de pantalla anuncien “obligatorio” como parte del texto de la etiqueta, agrega texto visualmente oculto:

<label for="email">
  Email
  <span aria-hidden="true">*</span>
  <span class="visually-hidden">obligatorio</span>
</label>
<input id="email" name="email" type="email" required>

La idea clave: siempre que uses atributos de estado o propiedades ARIA en un span, asegúrate de que el elemento también tenga el role correcto y todos los atributos complementarios requeridos por ese role. Cuando un elemento HTML nativo ya proporciona la semántica que necesitas, como <button>, <progress>, o <meter>, prefiere usarlo en lugar de un span con ARIA, ya que los elementos nativos son más robustos y requieren menos marcado adicional.