I'm trying to figure out if altering the DOM of a website will present any accessibility problems. I am placing all of the jQuery in a $(document).ready() function. Will this cause any accessibility issues with the altered elements?

We don't have access to the theme template html files, only css and js files. So for example I'm adding a div into our theme using$('[element name]').before('<div>[div content here]</div>') will this content be as accessible as the rest of the DOM as long as I include all the appropriate aria attributes etc?

CodePudding user response：

Yes it will impair accessability to an extent, according to this MDN article. In summary, JavaScript should not be responsible for generating the website's content, that should be done in the HTML with the appropriate element to describe it. JavaScript should be used almost exclusively for enhancing functionality, such as button clicks, client-side form validation, video controls, etc.

If this answered your question, you can mark it as correct.

CodePudding user response：

In theory, you shouldn't rely on JavaScript to produce the whole HTML code of your site, it's basically a bad practice. However, it's exactly how big frameworks like angular and react work. Given that 99% of browsers support JavaScript, it's in fact no longer a problem nowadays.

The true answer is in fact both yes and no, it depends. It depends on the actual HTML code injected. The key point is that, you must have the same care with generated code as with the code directly written in HTML by hand, i.e. be careful on headings, form labels, alt texts, ARIA attributes if you need them, etc. all the time and in particular each time you add/remove something in the DOM. Additionally, you must pay attention to where the focus is or might be and a few other things.

It's often overlooked precisely because some people assume that it's anyway not accessible, what isn't true. In order to be accessible, a site with dynamic contents must be accessible at any moment. If it isn't always the case, then you will lose users in need of accessibility at some point. In practice the loss of accessibility often happens at the most critical moment: checkout or paiement, maybe not because of your fault if the paiement site isn't accessible.