加载 DOM 后添加的 WAI-ARIA 属性

Question

我必须在 web 可访问性下改进网站。 我在 html 中直接在 Drupal 中添加 aria 属性，但是有些东西我不能在 html 中添加，比如轮播和幻灯片，所以可以在加载文档属性后添加元素。 喜欢

$(document).ready(function(){
  $(".item").attr("aria-label", "My Label");
});

Answer 1

是的，如果您没有其他选择，这样做是可以接受的。

但是请注意，这并不是使用某些屏幕阅读器的 100% 万无一失的方式（它应该在最新版本的 NVDA、VoiceOver 和 JAW 中正常工作）。

一些较旧的屏幕阅读器将在文档加载时构建可访问性树，因此通过 vanilla JS 作为页脚中的内联 JS 块来实现是谨慎的（如果有点不好，但我能想到的最佳解决方法）。

鉴于您当前的设置，这可能是不可能的，如果是这种情况，那么您建议的方式是可以接受的，并且您将能够在合理的时间范围内达到最佳效果。

如果你真的想修复它（你应该。） - 你是否考虑过在生成 HTML 时替换有问题的插件/库（或扩展/编辑库/插件）以添加所需的元素。 我就是这样处理的。

Answer 2

是的，使用：

$(document).ready( ()=> {
...
});

一旦您的 web 页面完全加载，将应用特定属性。