如何使用键盘箭头键在按钮之间导航？

Question

我有一个这样的html结构

<div class="my-class" role="tablist" aria-label="upcoming week">
  <button id="Thu" class="title-box" role="tab" aria-controls="Thu-tab" aria-selected="false">Thu </button>
  <button id="Fri" class="title-box selected" role="tab" tabindex="0" aria-controls="Fri-tab" aria-selected="true">Fri</button>
  <button id="Sat" class="title-box" role="tab" tabindex="0" aria-controls="Sat-tab" aria-selected="false">Sat</button>
  <button id="Sun" class="title-box" role="tab" tabindex="0" aria-controls="Sun-tab" aria-selected="false">Sun</button>
  <button id="Mon" class="title-box" role="tab" tabindex="0" aria-controls="Mon-tab" aria-selected="false">Mon</button>
  <button id="Tue" class="title-box" role="tab" tabindex="0" aria-controls="Tue-tab" aria-selected="false">Tue</button>
  <button id="Wed" class="title-box" role="tab" tabindex="0" aria-controls="Wed-tab" aria-selected="false">Wed</button>
</div>

使用键盘 tab 键，我可以移动到下一个按钮。但是用键盘方向键就不行了。

是否可以使用键盘箭头键在这些按钮之间导航以向前或向后移动？

我缺少键盘箭头键的哪些属性？

Answer 1

你没有忘记任何事情。默认情况下不会自动提供使用箭头键导航。您需要自己实现它。

您可以在网络上的许多地方找到示例和指南，例如在此页面上： https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html

如果您使用 Angular、vueJS、React 或其他此类框架，请注意其组件的键盘支持。 有些可以很好地通过键盘访问，但大多数不是。