Tengo este contador de credibilidad de números en mi sitio que, a medida que el usuario se desplaza, los encabezados con números cuentan hacia arriba desde cero hasta el total final. Creo que es una forma llamativa de mostrar credibilidad, pero en lo que respecta a la accesibilidad, no sé si cambiar dinámicamente los números con JavaScript confundirá a las personas que usan lectores de pantalla. Pensé en agregar un atributo "aria-labeledby" al encabezado para que el lector de pantalla lo lea en lugar del texto que cambia dinámicamente, pero todas mis búsquedas en Google dicen que los encabezados no necesitan etiquetas aria, porque los lectores de pantalla leerán el texto dentro de las etiquetas de encabezado.
Mi pregunta es si agrego un atributo "aria-labeledby" al encabezado, ¿esto afectará la forma en que los lectores de pantalla leen el elemento?
Normalmente no necesita hacer nada especial. Dado que JavaScript es compatible con el navegador del usuario, el texto del encabezado también cambiará dinámicamente para los lectores de pantalla.
Ese cambio dinámico en el contenido puede ser problemático para los lectores de pantalla si no se espera razonablemente. Más especialmente, por ejemplo, cuando algo que se está leyendo en ese momento se reemplaza repentinamente por otra cosa o se elimina por completo sin la intervención del usuario. Un caso común de esto es un carrusel con contenido que cambia cada pocos segundos. Dichos carruseles suelen ser malos para la accesibilidad si no se pueden detener fácilmente por este motivo, entre otros.
Sin embargo, en su caso, para un contador simple, probablemente esté bien. Probablemente no tendrá mucho daño.
Los atributos aria-label y aria-labelledby solo se pueden usar de manera confiable con elementos interactivos que se pueden enfocar. EN elementos no interactivos, no se garantiza que se lean en todas las plataformas/navegadores/lectores de pantalla. Entonces, de todos modos no es una buena solución aquí.