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

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>

使用键盘制表键，我可以移动到下一个按钮。但使用键盘箭头键，它不起作用。

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

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

Answer 1

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

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

如果您正在使用Angular、vueJS、React或其他类似的框架，请注意它们组件的键盘支持。有些是很好的键盘访问，但大多数不是。