以编程方式关注 <table> 元素会导致 VoiceOver 导航中断

如何解决以编程方式关注 <table> 元素会导致 VoiceOver 导航中断

我有一张桌子，我正试图让 VoiceOver 访问和导航它。就其本身而言，该表似乎可以由 VO 导航，并且似乎符合我找到的大多数无障碍指南。

表格是：

<table id="menu" tabindex="0">
  <caption>Cafe menu items</caption>
   <thead>
    <tr>
      <th scope="col">Size</th>
      <th scope="col">S</th>
      <th scope="col">M</th>
      <th scope="col">L</th>
      <th scope="col">XL</th>
    </tr>
   </thead>
   <tbody>
    <tr>
      <td scope="row">Coffee</td>
      <td>1.00</td>
      <td>2.00</td>
      <td>3.00</td>
      <td>4.00</td>
     </tr>
     <tr>
     <td scope="row">Frappe</td>
     <td>2.00</td>
     <td>3.00</td>
     <td>4.00</td>
     <td>5.00</td>
    </tr>
   </tbody>
</table>

我认为我的主要问题是我最初如何将焦点放在这个表格上——当用户点击（通过鼠标或通过 VoiceOver）一个链接时，这个菜单被添加到页面上，页面向下滚动到它。但是，当我尝试在表格中导航（通过 VO + 箭头键）时，这几乎是不可能的——完全跳过单元格，或者更频繁地，我会自动导航到表格之外。 VoiceOver 会说“你当前在桌子上”，但是当我按 VO + 箭头键（甚至 Tab 键）时，我会被导航出表格并转到另一个元素。有时，它也会错误地读取列/行数，当它最初命中表时也是如此。

当点击链接打开菜单时，我使用 document.getElementById('menu').focus(); 将焦点添加到表格，并在表格上设置 tabindex="0" 以使其获得焦点。我有一种感觉，这就是 VoiceOver 中的问题，但不知道如何以编程方式在点击时专注于表格。

正如我所说，就其本身（在代码段中）而言，导航表格按预期工作。但是以编程方式导航到它，然后导航它，真的很麻烦。

任何建议/意见将不胜感激！

更新：我意识到问题可能是我正在 Chrome 上的 VoiceOver 中测试这个，这似乎不是一个非常常见的组合 survey 并且可能是不推荐的组合。一切正常，因为它在 Safari 中应该非常可靠。