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

Question

I have to improve website under web accessibility. I am adding aria attributes directly in html where possible in Drupal, but there are things that I can not add in html, like carousels and slideshows, so is it okay to add aria attributes to an element after document is loaded. like

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

Answer 1

Yes it is acceptable to do this if you have no other options.

However be aware that this isn't a 100% fool-proof way of doing things with certain screen readers (it should work correctly in the latest versions of NVDA, VoiceOver and JAWs).

Some older screen readers will build the accessibility tree on document load so it would be prudent (if somewhat of a bad practice but the best workaround I can think of) to do it via vanilla JS as an inline JS block in the footer.

This may not be possible given your current setup, if that is the case then the way you suggested is acceptable and the best you will be able to achieve in a reasonable timescale.

If you really want to fix it (and you should.) - have you thought about replacing the offending plugins / libraries (or extending / editing the libraries / plugins) to add the required elements when the HTML is generated. That is how I would handle this.

Answer 2

Yes, using:

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

will apply particular attributes once your web page is fully loaded.