Moving ChromeVox focus from menu div to content div

Question

I am working with the ChromeVox extension to add a text reader for our church web site www.uulynchburg.org. When using the mouse to navigate, it is easy to click on a text block to start the reader. The problem comes for someone unable to use the mouse and relying on navigation keys. I can walk down the menu, but once a menu item is selected, I want the focus to jump from the memu to the start of the text in the content .

Answer 1

If you want to focus ChromeVox on a particular page element, you need to focus on that element.

1. Create a wrapper element which is focusable.

   To make inherently un-focusable elements (non-form elements, buttons, links, etc) focusable, add tab-index="-1".)

   <div id="main-content" tab-index="-1">
     <h1>heading</h1>
   </div>
   

2. Use javascript to focus on the element after navigating, on page load, or whatever event makes most sense.

   document.getElementById('main-content').focus()
   

This is an example but you can select any specific element.

This technique is especially useful if you are building a single-page-app.