如何为使用D3.js制作的Timeline Slider实现508 Compliance (如Aria)？

Question

我了解Aria和making applications web accessible.But的用法，我不知道如何实现时间轴滑块的合规性方法。我如何抓取画笔的焦点，并让它通过辅助技术(如屏幕阅读器)读取数据

这是plunk I'm working with。

Answer 1

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

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

在普通的列表框中，项是垂直列出的。你的“列表”是水平的。

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

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

一旦你完成了这项工作，将反馈给屏幕阅读器用户只需几步之遥。其中一种简单的方法是使用aria-live区域。您可以在每次选择更改或扩展时更新aria-live区域中的文本。更改将在您更新文本时阅读。文本本身可以对视觉用户隐藏，或者正如dandavis在他的示例中建议的那样，显示选定的范围可能对视觉用户有帮助。