0

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 .

John M Phillips
  • 19
  • 2
  • Could you attach some codes about the issue? – Dayton Wang Dec 16 '14 at 19:37
  • The web page is [link](http://www.uulynchburg.org) with a menu division
    and a content devision
    .
     – John M Phillips Dec 17 '14 at 14:14
  • Having learned a little more, if I use header tags at the top of each division, the user can jump to the next or previous header. See [chromevox keyboard](http://www.chromevox.com/keyboard_shortcuts.html) for a list of key bindings. – John M Phillips Dec 17 '14 at 14:20

1 Answers1

0

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.

Beau Smith
  • 33,433
  • 13
  • 94
  • 101