使用JS添加WAI-ARIA属性

Question

在工作中，我一直在优化一个网站，我已经帮助开发了我们的客户之一(我不能说谁)是符合ADA使用围-ARIA属性。我一直在想，创建一个小的JS库是否会更容易一些，比如将"role=button“添加到我设计的看起来像按钮的锚上，在我想要成为"tabable”的元素中添加"tabindex=0“等等。

我想知道在JS中添加WAI属性是一种好的实践，还是对此表示不满。一些可访问性评估工具在评估它时不会运行页面的JS，因此它会认为这些都是痛点，而实际上并非如此。

Answer 1

我认为，为了渐进增强的利益，最好将所有的ARIA内联起来，而不是依赖脚本来添加它。

如果有其他脚本错误，如果连接被删除，如果有阻塞脚本，等等，那么您的库可能不会发挥作用，您的补救工作也将失败。

我还想在Steve上面说的关于在链接上使用role=button的基础上构建。特别是当您认为视觉样式(使链接看起来像按钮)对屏幕阅读器使用(对于许多ARIA角色都有好处)来说是毫无意义的。我在更详细的在另一个如此的答案中中讨论了其他键盘交互问题，但当您尝试将链接转换为按钮时，这里有一个需要考虑的问题：

超链接(<a href>)可以通过按enter键触发。但是，可以通过按enter键或空格键来触发真正的<button>。当超链接有焦点，用户按下空格键时，页面将滚动一个屏幕。一些辅助技术的用户将期望基于所使用的元素的行为。

此外，我警告您不要将tabindex=0设置为您想要成为表的元素，除非它是一个交互式元素。例如，不要把它放在标题(<h#>)上，这样某人就可以点击它，因为屏幕阅读器(例如)已经允许按标题导航了。

Answer 2

这可能对添加ARIA内联还是通过脚本添加？很有帮助，还请注意，如果使用role=button，则需要表现得像个按钮 (即提供适当的键盘交互行为)。