How to get voiceover focus when my elements are not seen in the screen but present in the page

Question

I have a HTML5 app. This app contains some tab elements. Also some long form. When I flick through in voiceover , the voiceover reads the elemnts way down the screen but they are not visible in the screen. Thus, when I doublle click to do an action. nothing happens. When an element is not visible in the screen and voiceover is able to read it, that element is not becoming actionable. Whether text box, check box or any select box. I have tried specifying tabindex="0". That works fine only for check boxes. But I am not able to find fix for other elemnts specifically when I have tabs structure.

Answer 1

Followed this structure and it sorted the issue.

<ul role="tablist">
<li role="presentation"><a role="tab"></a></li>
<li role="presentation"><a role="tab"></a></li>
<li role="presentation"><a role="tab"></a></li>
<li role="presentation" class="active"><a role="tab" aria-selected="true"></a></li>
.
.
.
.
</ul>

This brings the element in visible focus and makes it tab able. It is advised to use aria-selected and aria-control for better user experience.