如何使用JavaScript确定屏幕阅读器将阅读什么?

时间:2019-07-17 15:52:48

标签: javascript typescript accessibility screen-readers wcag2.0

我有一个已经可以使用iOS和Android设备访问的Web应用程序,但是我正在尝试使同样的事情在没有屏幕阅读器的设备上运行。我有一个应用程序外壳形式的解决方案,可以在其中启动我的Web应用程序。该外壳程序可以像“话语提示”一样浏览/操作这些元素,而没有问题……有效地,我已经使用替代的屏幕操作设备实现了可移动性受损的可访问性。

我还需要支持屏幕阅读器,我不知道是否有一种方法(在JavaScript / Typescript中)检索给定按钮应读取的内容。例如,如果显示一个标题为“下一步”的按钮,我想检索文本“下一步,按钮”或类似的内容。

是否存在基于标准的方法?或者,是否存在其他人已成功用于解决类似问题的第三方库?还是我注定要写自己的书?

为了阐明这一点:我可以访问JAWS和NVDA,并且已经在两者上验证了我的解决方案。

TL; DR::我正在寻找一种让JavaScript查询元素并检索要说出的内容的方法,而不是为了我自己的目的,而是为了使我可以传递正在与我自己创建的另一个工具对话。

4 个答案:

答案 0 :(得分:4)

我认为最好的方法是实际安装/启用屏幕阅读器(例如macOS内置的屏幕阅读器),然后闭上眼睛,亲自听一听。

答案 1 :(得分:2)

TL; DR:不可能

基本上,您不可能让特定的屏幕阅读器说出字符串,也无法确定是否启动了屏幕阅读器。
不仅如此,不同的屏幕阅读器还以不同的方式传达信息,而且,用户可以调整他/她的屏幕阅读器,这样可以按照您的示例说,下一个按钮, 或只是 next (或播放声音而不是说“ Button”)。因此,看来您没有真正的机会来获得所需的东西。

答案 2 :(得分:1)

您要寻找的是accessible name computation。跳至第4.3.1节“术语”,您将逐步找到算法。

这是一个很大的嘴。我还没有找到一个好的开源实现。而且,即使您正确地遵循了它,也会发现建立的屏幕阅读器软件并非总是如此。

您还可以等到Accessibility API(或AOM Project)获得广泛的支持,然后再利用它,但是谁知道那将在何时发生。

但是,如果您完全控制语音输出,为什么不与视障用户协作来优化体验,而不是着眼于软件的功能呢?

答案 3 :(得分:1)

也许您可以使用Puppeteer's accessibility API来计算给定节点的可访问性树的外观。

  

Accessibility类提供检查Chromium的可访问性树的方法。可访问性树由屏幕阅读器或开关之类的辅助技术使用。

我不确定您是否能准确计算出每个屏幕阅读器的输出,但值得一试。