$("#onReviewClick").click(function() { $('html, body').animate({ scrollTop: ($("#scrollHere").offset().top)-100 }, 1000); });Tengo un texto para leer más, este onclick se desplaza hacia abajo hasta la parte de pie de página de la página y se enfoca en las reseñas. Quiero que el lector de pantalla lea las reseñas cuando el desplazamiento se mueva hacia abajo hasta la parte de reseñas.
Usaría la función de devolución de llamada animate para ejecutar su código después de que se haya completado la animación.
Luego, creo que agrega el atributo aria-live="polite" al elemento que desea que hable su lector de pantalla.
$("#onReviewClick").click(function() { $('html, body').animate({ scrollTop: ($("#scrollHere").offset().top) - 100 }, 1000, function() { // Animation complete. $("#scrollHere").attr('aria-live', 'polite'); }); });La forma más sencilla y segura de desplazarse por la pantalla y hacer que el lector de pantalla vaya a leer en el lugar correcto es utilizar anclas antiguas como base:
<a href="#more">More</a> . . . <p id="more">More text</p>Un poco menos simple y seguro, pero aún funciona muy bien, es poner inmediatamente el foco en un elemento enfocable de forma natural o enfocable con tabindex=-1:
<a href="#" onclick="document.getElementById('more').focus();">More</a> . . . <p id="more" tabindex="-1">More text</p>Hago hincapié en la palabra inmediatamente porque mover el foco fuera de una interacción inmediata a veces puede causar problemas. Puede ignorarse por completo o hacer que el lector de pantalla salte a otro lugar intermedio y luego no siga el segundo cambio de enfoque unos milisegundos más tarde. Entonces, hacerlo al final de una animación, incluso si son solo unas pocas docenas de milisegundos, puede causar problemas.
Esta respuesta no hará felices a los diseñadores, pero idealmente, debe tomar el patrón de enfoque inmediato o ancohr como base, y luego construir su animación sobre eso si puede, en lugar de lo contrario. Hablando de accesibilidad, va a ser mucho más robusto. Por cierto, ten en cuenta que el usuario puede haber configurado su dispositivo para deshabilitar las animaciones o reducirlas, y eso también debes tenerlo en cuenta.