aria-valuenow

Cuándo utilizarlo

En cualquier widget personalizado que represente un valor a lo largo de un rango: role="slider", role="progressbar", role="spinbutton", role="scrollbar". El atributo transporta el valor numérico actual. Casi siempre se combina con aria-valuemin y aria-valuemax, que en conjunto permiten a las tecnologías de asistencia calcular y anunciar tanto un porcentaje como un valor absoluto.

Generalmente no es necesario en un <input type="range"> o <progress> nativo — el navegador expone el valor de forma automática. Se recurre a aria-valuenow cuando el widget se ha construido con marcado personalizado.

Cómo se comporta

El valor es un número (entero o decimal). Las tecnologías de asistencia lo anuncian como la posición actual del widget, a menudo junto con un porcentaje del recorrido entre el mínimo y el máximo: «Volumen, deslizador, 7 de 10, 70 por ciento.»

Si el valor del widget resulta más significativo como etiqueta que como número — «Viernes» en un slider de día, «Medio» en un selector de tres posiciones — se debe proporcionar aria-valuetext con la etiqueta legible. Las tecnologías de asistencia leerán aria-valuetext en lugar de aria-valuenow, mientras que las que ignoran valuetext disponen aún del respaldo numérico. Se deben establecer siempre ambos.

En el caso de progressbar, se puede omitir aria-valuenow cuando el progreso es indeterminado (el caso del indicador giratorio). En el caso de slider, el atributo es obligatorio.

Errores frecuentes

• Establecer aria-valuenow sin aria-valuemin ni aria-valuemax. Las tecnologías de asistencia no disponen de rango, por lo que anuncian un número sin contexto.
• Actualizar la posición visual mediante transformaciones CSS sin actualizar nunca aria-valuenow. Los usuarios de lectores de pantalla escuchan el valor inicial indefinidamente.
• Un valor fuera del rango mínimo/máximo — aria-valuenow="150" cuando el máximo es 100. Las tecnologías de asistencia o bien lo recortan o lo anuncian literalmente; en cualquier caso es un error.
• Olvidar aria-valuetext para escalas no numéricas. Los usuarios escuchan «3 de 5» cuando la escala es realmente «Bajo / Medio-bajo / Medio / Medio-alto / Alto».
• Usar aria-valuenow en algo que no es un widget de rango — un botón normal, un icono. El atributo no tiene efecto fuera de los roles que lo admiten.
• No mantener el modelo de teclado sincronizado. El widget debe responder a las teclas de flecha, Inicio, Fin, Re Pág, Av Pág — el atributo por sí solo no dice nada sobre la compatibilidad con teclado.

Ejemplo

<div
  role="slider"
  tabindex="0"
  aria-label="Volume"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="7"
  aria-valuetext="7 out of 10"
>
  <div class="slider-thumb" style="left: 70%"></div>
</div>