加載 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 頁面完全加載，將應用特定屬性。