如何为使用D3.js制作的时间轴滑块实现508合规性(如Aria)?

时间:2016-01-25 20:16:53

标签: javascript jquery d3.js accessibility

我理解Aria的用法并使应用程序可以访问web。但我不知道如何为时间轴滑块实现合规性方法。我如何抓住画笔的焦点并将其数据读取到辅助技术(如屏幕阅读器)

这是plunk I'm working with

1 个答案:

答案 0 :(得分:0)

创建可供屏幕阅读器用户使用的对象的第一步是启用键盘交互。

我不确定我是否完全理解您正在使用的对象,但从键盘的角度来看,它看起来应该像允许连续选择的列表框一样。

在普通列表框中,垂直列出项目。您的“列表”是水平的。

在普通列表框中,我可以使用向上/向下箭头键在列表框中移动选择。选择突出显示。在“列表”中,我应该能够使用左/右箭头键将当前选择移动到其中一个块。块是宽的,如前几个段,还是窄,如最后一段,无关紧要。当我向左或向右移动时,选择了适当的块。

在普通列表框中,一旦我选择了一个项目,我可以通过在使用向上/向下键的同时按住shift键来扩展该选择。在你的“列表”中,我应该能够在使用左/右箭头键的同时按住shift键来扩展我的选择。模仿按住按钮拖动鼠标。

一旦您完成了这项工作,只需几步即可获得屏幕阅读器用户的反馈。其中一个简单的方法是使用aria-live区域。每次选择更改或扩展时,您都可以更新aria-live区域内的文本。更新文本时将读取更改。文本本身可以隐藏在视觉用户之外,或者像他的例子中的dandavis所示,显示所选范围可能对视觉用户有用。