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

Question

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

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()
   

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

如果您要构建单页应用程序，则此技术特别有用。