咏叹调角色选项卡与箭头按钮

时间:2018-06-16 02:55:49

标签: javascript html5 accessibility wai-aria web-accessibility

WCAG有一个很好的设计模式,用于实现带有Tabpanels here

的标签

它使用"漫游标签索引"和键盘箭头键在标签之间循环。 这很好用,但是我最近收到了一个请求,要求制作一个tab / tabpanel小部件,一次只能显示一个标签,并且有" previous"和" next"箭头按钮循环选项卡。

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

是否违反任何可访问性规则才能将这些新的箭头导航按钮添加到窗口小部件,只要我确保他们的标签顺序是之前或之后标签/ tabpanels? 我认为键盘功能可以保持原样(使用箭头键在标签之间循环)

1 个答案:

答案 0 :(得分:3)

我是盲人屏幕阅读器用户。 我会像往常一样保持左/右箭头键在标签中导航,而不是让你的箭头按钮可以专注。

我的理由如下:

  • 您的箭头按钮控制滚动和滚动是纯粹的视觉效果
  • 通常,作为屏幕阅读器用户,我们没有键盘访问滚动条中的按钮。它对我们来说完全透明。

如果您采用多行文本区域,则向下箭头始终转到下一行,无论光标当前是否位于屏幕底部。 我们没有任何特殊要做,特别是我们不必手动按下滚动条的向下箭头按钮。光标转到下一行,如果需要,文本内容会自动向下滚动一行。

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

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

作为另一个奖励,鉴于您自己实施滚动按钮,您还应该对鼠标滚轮作出反应。