为什么我在使用制表键和箭头键时无法专注于此菜单项？答案

【问题标题】：Why am I not able to focus on this menu item when using tab and arrow keys?为什么我在使用制表键和箭头键时无法专注于此菜单项？
【发布时间】：2022-08-04 07:15:21
【问题描述】：

我有如下菜单选项：

<li class=\"item1\" role=\"menuitem\" tabIndex=\"-1\">
  <svg>...</svg>
  <span>Item #1</span>
</li>

<li class=\"item2\" role=\"menuitem\" tabIndex=\"-1\">
  <svg>...</svg>
  <span>Item #2</span>
</li>

<li class=\"item3\" role=\"menuitem\" tabIndex=\"-1\">
  <svg>...</svg>
  <span>Item #3</span>
</li>

<li class=\"item4\" role=\"menuitem\" tabIndex=\"-1\" aria-disabled=\"true\">
  <svg>...</svg>
  <span>Item #4</span>
</li>

从我读过的关于aria-disabled 的所有内容来看，它似乎仍然应该允许用户通过制表符和箭头键访问元素（该元素仍然是可聚焦的）。但是，当我尝试通过选项卡和箭头键导航到第四个菜单项时，它不会专注于它，而是完全跳过它。我尝试删除aria-disabled 只是为了看看这是否会改变任何东西，并且可以通过键盘访问它。我可以很好地浏览其余的菜单项，但由于某种原因，我无法到达第四个......

你在哪个浏览器中？由于 tabIndex=\"-1\"，我无法使用键盘聚焦其中的任何一个。编辑：在 Chrome 中
我也在 Chrome 中！是的，即使tabIndex 的值为-1，我也对如何通过它们进行标签感到困惑......
也许<li> 的内容是什么。你能显示相关的HTML吗？更好的是，作为一个 sn-p
@ITgoldman这只是一个svg（一个图标）和每个里面的菜单选项名称；他们对我来说似乎还可以，没有什么明显错误的……我在上面编辑了我的问题！
ARIA 属性有完全没有效果关于键盘使用。它们是辅助技术（例如屏幕阅读器）传达语义的严格提示。如果您在<input> 上使用disabled 属性，那影响键盘。但是，如果您有一个自定义组件并想要禁用它，您可能会应用样式并阻止键盘焦点，但辅助技术对您的样式一无所知，并且除非您添加 aria-disabled=\"true\'，否则不会知道该元素已禁用. w3.org/TR/aria-in-html/#nativesemantics-\"添加 ARIA...不会改变行为\"

标签： javascript accessibility

【解决方案1】：

如果tabindex=-1，它不会关注我。如果你想让一个元素成为焦点，只需添加tabindex=0 即可。阅读更多关于tabindex

ul {
  list-style: none;
}

<button>focus me</button> then click [tab]
<ul>
  <li class="item1" role="menuitem" tabIndex="0">
    <svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" /></svg>
    <span>Item #1</span>
  </li>

  <li class="item2" role="menuitem" tabIndex="-1">
    <svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="red" /></svg>
    <span>Item #2 with tabindex=-1</span>
  </li>

  <li class="item3" role="menuitem" tabIndex="0">
    <svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" /></svg>
    <span>Item #3</span>
  </li>

  <li class="item4" role="menuitem" tabIndex="0" aria-disabled="true">
    <svg width="50" height="50"><circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" /></svg>
    <span>Item #4</span>
  </li>
</ul>
<button>focus me</button>

【讨论】：

谢谢，因为它在这里工作而不是在我的项目中，我想我需要多挖掘一点..