javascript - Does document.getElementById("someId").innerHTML = `${someVar}` set a value that is accessible to screen readers?

Question

Preamble: I am only interested in getting info about DOM API, HTML, and Vanilla JS for my current project. I am not interested in jQuery at the moment, so please do not offer me advice or solutions with jQuery. Thanks for understanding. If there is a tutorial that will tell me about how to test for accessibility, or if you have some ways for me to troubleshoot similar issues in the future, I would love to hear it.

I came across the concept of the shadow DOM today, and I looked up its accessibility. I read through this: https://marcysutton.com/accessibility-and-the-shadow-dom.

I am trying to create HTML that has elements whose values are updated by JavaScript. I have settled for the moment on using document.getElementById().innerHTML = '' to test this out. I have a pen here: https://codepen.io/coscholl/pen/qBbYNPY

You can see that these D&D ability scores are created by a function and added by the DOM method. If this is not accessible, I want to make an accessible version. So, is this method accessible to screen readers and the like?

Thanks!

标签： javascripthtmldomaccessibility

Answer 1

Yes. It is screen readable. There is nothing inherently wrong with using .innerHTML from a screen reader or accessibility standpoint.

Using .innerHTML while the assignment value is text will create a text node which you can verify by inspecting the DOM. However, best practice would dictate using .textContent for replacing element text.