使用JS添加WAI-ARIA属性

Question

在工作中，我一直在优化自己为一个客户（我不能说是谁）开发的网站之一，以使用WAI-ARIA属性使其符合ADA。 我一直在想，创建一个小型JS库是否会更容易，该库执行诸如将“ role = button”添加到样式设置为按钮的锚中，将“ tabindex = 0”添加到元素中希望成为“表”等

我想知道用JS添加WAI-ARIA属性是一种好习惯还是不赞成这种做法。 一些可访问性评估工具在评估页面时不会运行该页面的JS，因此，当它们不是真正的时候，它们会认为这是痛点。

Answer 1

这可能会有所帮助添加内联还是通过脚本添加ARIA？ 还要注意，如果您使用role = button，它需要像按钮一样工作 （即提供适当的键盘交互行为）

Answer 2

我认为出于渐进增强的考虑 ，最好将所有ARIA内联，而不要依靠脚本来添加它。

如果还有其他脚本错误，连接断开，途中有阻塞脚本等，则您的库可能无法使用，并且您的补救工作也将丢失。

我也想在史蒂夫上面说过的关于在链接上使用role=button上。 尤其是当您认为视觉风格（使链接看起来像按钮）对于屏幕阅读器的使用（许多ARIA角色对其有益）没有意义。 我在另一个SO答案中更详细地介绍了其他键盘交互的陷阱，但是当您尝试将链接变成按钮时，需要考虑以下因素：

可以通过按Enter键来触发超链接（ <a href> ）。 但是可以通过按Enter键或空格键来触发真正的<button> 。 当超链接具有焦点并且用户按下空格键时，页面将滚动一屏。 某些辅助技术的用户将根据所使用的元素来预期行为。

另外，我提醒不要将tabindex=0放置在您希望可标签的元素上，除非它是交互式元素。 例如，请勿仅将其放在标题（ <h#> ）上，否则有人可以使用它来进行选择，因为屏幕阅读器（例如）已经允许按标题进行导航。