CODEWITHSUNDEEP
javascripthtmlaccessibility
Zara
Zara

Reputation: 55

Accessibility issue on scroll

$("#onReviewClick").click(function()
{ $('html, body').animate({
scrollTop: ($("#scrollHere").offset().top)-100 },
1000); });

I have a text read more, this onclick scrolls down to the footer part of the page and focus on the reviews. I want the screen reader to read the reviews when the scroll moves down to the review part.

Upvotes: 0

Views: 224

Answers (2)

QuentinC
QuentinC

Reputation: 14837

The simplest and safest way to scroll the screen and make the screen reader to go read at the correct place is to use good old anchors as the base:

<a href="#more">More</a>
.
.
.
<p id="more">More text</p>

Slightly less simple and safe, but still very well working, is to immediately put the focus at an element naturally focusable or made focusable with tabindex=-1:

<a href="#" onclick="document.getElementById('more').focus();">More</a>
.
.
.
<p id="more" tabindex="-1">More text</p>

I emphasize about the word immediately because moving the focus outside of an immediate interaction can sometimes cause problems. It may be totally ignored, or make the screen reader to jump in another place in between and then don't follow the second focus change a few milliseconds later. So, doing it at the end of an animation, even if it's only a few dozends of milliseconds, can cause problems.

This answer won't make designers happy, but ideally, you should take the ancohr or immediate focus pattern as a base, and then build your animation on top of that if you can, rather than the opposite. Accessibility speaking, it's going to be much more robust. By the way, note that the user can have configured his device to disable animations or reduce them, and you should take that into account, too.

Upvotes: 1

dave
dave

Reputation: 2901

I'd use the animate callback function to run your code after the animation has completed.

Then I believe you add the aria-live="polite" attribute to the element you want your screen reader to speak.

$("#onReviewClick").click(function() {
  $('html, body').animate({
    scrollTop: ($("#scrollHere").offset().top) - 100
  }, 1000, function() {
    // Animation complete.
    $("#scrollHere").attr('aria-live', 'polite');
  });
});

Upvotes: 2

Related Questions