CODEWITHSUNDEEP
reactjsreact-reduxaccessibility
Katsukichan
Katsukichan

Reputation: 23

How to make the screen reader start to read the web content after scrolling

I'm making an accessible web application. One of the feature is a button that allows users to scroll to a certain section of the page. I'm using window.scrollTo(x,y) for this functionality.

Now testing my application using the built-in Mac VoicerOver, I found that although I can click on the button and scroll with no problem, after scrolling, VoiceOver doesn't read anything. Instead I have to click on the mouse one, or use the keyboard equivalents to make it read the content that's on the screen after scrolling.

I'm afraid that some users may not realize that they need another click after clicking on the button. I have two possible solutions:

  1. When the screen reader read the button, it also tells the user that if they want to go to the livechat, they need to click again after clicking on the button. I know how to implement this one, but it looks verbose and dumb.

  2. Change my code so that VoiceOver will read the content after scrolling. I don't know how to implement this one.

The content I would like the screen reader to read is wrapped in a tag.

Upvotes: 2

Views: 2195

Answers (1)

slugolicious
slugolicious

Reputation: 17535

If you are only scrolling the page, then most screen reader users will not care that you scrolled. With limited or no vision, whether the screen scrolls or not does not matter because the screen cannot be seen.

However, if you are scrolling the page in order to put a certain element into view, then that would benefit screen reader users too.

It sounds like you're trying to do the latter:

allow users to scroll to a certain section of the page

In that case, you also need to put the keyboard focus on that element via the focus() javascript call. Moving the focus will cause VoiceOver to read that content. But to move the focus to a natively non-focusable element (such as an <h2> or a <section> or <p>), the receiving element will need tabindex="-1".

<h2 tabindex="-1" id="myh2">some heading</h2>

and then somewhere you'd have this javascript:

var element = document.getElementById("myh2");
element.focus();

Upvotes: 7

Related Questions