带有箭头按钮的 aria 角色选项卡

Question

WCAG 有一个很棒的设计模式来实现带有 Tabpanels 的 Tabs here

它使用“漫游标签索引”和键盘箭头键在标签之间循环。 这很好用，但我最近收到了一个请求，要求制作一个选项卡/选项卡面板小部件，它一次只显示一个选项卡，并且有“上一个”和“下一个”箭头按钮来循环浏览选项卡。

在视觉上，箭头按钮位于活动标签的两侧。但是在 tab-order 方面，WCAG 设计模式明确规定与活动选项卡关联的 tabpanel 应该按照 tab 顺序跟随它。

将这些新的箭头导航按钮添加到小部件是否会违反任何可访问性规则，只要我确保它们的选项卡顺序在选项卡/选项卡面板之前或之后？ 我认为键盘功能可以保持目前的状态（使用箭头键在选项卡之间循环）

Answer 1

我是盲人屏幕阅读器用户。 我会像往常一样保持左/右箭头键在选项卡中导航，并且根本不让箭头按钮具有焦点。

我的理由如下：

• 你的箭头按钮控制滚动和滚动是纯视觉的东西
• 通常，作为屏幕阅读器用户，我们无法通过键盘访问滚动条中的按钮。它对我们来说是完全透明的。

如果您以多行文本区域为例，无论光标当前是否位于屏幕底部，向下箭头始终会转到下一行。 我们没有什么特别的事情要做，尤其是我们不必手动按下滚动条的向下箭头按钮。光标转到下一行，如果需要，文本内容会自动向下滚动一行。

如果有太多选项卡无法容纳在一行中，选项卡控件也会发生同样的情况。 在这种情况下，在流行的 GUI 桌面库中，您可以选择显示滚动箭头按钮，或使选项卡跨越多行。 它永远不会改变导航方式：左右箭头键总是转到下一个或上一个选项卡，无论视觉上发生了什么。

作为奖励，通常，当您单击滚动条按钮时，焦点不会转到按钮上；它立即返回到实际内容，即文本区域中的文本，或选项卡控件的当前活动选项卡。 这是一项或多项确认滚动按钮不应按 Tab 键顺序输入。

另一个好处是，鉴于您自己实现滚动按钮，您还应该对鼠标滚轮做出反应。