将ChromeVox焦点从菜单div移动到内容div

Question

我正在使用ChromeVox扩展程序为我们的教会网站www.uulynchburg.org添加文本阅读器。使用鼠标导航时，可以轻松单击文本块以启动阅读器。对于无法使用鼠标并依赖导航键的人来说，问题就出现了。我可以沿着菜单走，但是一旦选择了一个菜单项，我希望焦点从内容中的memu跳到文本的开头。

Answer 1

如果您想将ChromeVox专注于特定页面元素，则需要关注该元素。

1. 创建一个可聚焦的包装元素。 要使固有的不可聚焦的元素（非形式元素，按钮，链接等）可聚焦，添加tab-index="-1"。）

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

2. 导航，页面加载或任何最有意义的事件后，使用javascript关注元素。 document.getElementById('main-content').focus()

这是一个示例，但您可以选择任何特定元素。

如果您要构建单页面应用程序，此技术尤其有用。