Search code examples
javascripthtmlcss

Setting the Screen reader(talkback)'s initial focus in HTML and JavaScript

I have this old website using only HTML, CSS, and javaScript.(No React). And it is using talk back to read through the website. But it does not have the initial focus when screen reader mode is on. It will start focusing when I tab around. How can I set the initial focus with just HTML, CSS, and javaScript?

I have tried: document.querySelector('#foo\bar').focus() but it only sets the browser focus.

Solution

  • The element you are going to focus has to be focusable (like input). You can do this without js by only adding "autofocus" to your html element like this:

    <input type="text" id="myInput" name="myInput" autofocus />

    Or you can do it with js like this:

    document.querySelector("#myInput").focus();

    You provided valid js in your question, so the problem probably is that you are trying to focus an element that is not focusable. Here is an answer about what elements are focusable Which HTML elements can receive focus?

    If this doesn't solve your problem, it might be a Talk Back accessibility focus issue Android Talkback not registering onFocus for web. How do I manipulate accessibility focus with Android Talkback?