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

aria role tabs with arrow buttons

WCAG 有一个很棒的设计模式,可以用 Tabpanels 实现 Tabs here

它使用 "roving tab index" 和键盘箭头键在选项卡之间循环。 这很好用,但我最近收到了一个请求,要求制作一个 tab/tabpanel 小部件,该小部件一次只显示一个选项卡,并具有 "previous" 和 "next" 箭头按钮以循环显示选项卡。

在视觉上,箭头按钮位于活动选项卡的两侧。但就 Tab 键顺序而言,WCAG 设计模式明确指出与活动选项卡关联的选项卡面板应按 Tab 键顺序跟随它。

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

我是盲屏 reader 用户。 我会保持 left/right 箭头键像往常一样在选项卡中导航,并且根本不让箭头按钮可聚焦。

我的理由如下:

  • 你的箭头按钮控制滚动,滚动是纯粹的视觉内容
  • 通常,作为屏幕 reader 用户,我们无法通过键盘访问滚动条中的按钮。它对我们来说是完全透明的。

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

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

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

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