Changing tags for accessibility using javascript / jquery?
We have a situation where output from a CMS component is inaccessible (incorrectly ordered headings) so we need to change the heading tags. This would normally be achieved dead simply by changing the relevant template, but in this case we can't.
So, is it accessible to use jQuery / javascript to change a tag on page load (say a 'h3' to a 'h1').
I suspect that this approach could cause issues with some assistive technology, but I'm not sure.
The output looks fine when I view source and run through WAVE or similar, but I thought I'd ask anyway.
Share: 
Hi,
I know your pain! I am having to use a lot of javascript hacks to make a website that we are developing accessible because we use JSF and Primefaces components which produce some odd and often very inaccessible HTML. So i have been working my way round accessibility issues by implementing accessibility improvements like aria by adding it on page load through javascript.
I am not an expert, as i have only been working as the accessibility person at my company for a year, however When i have used a screen reader with the accessibility changes everything seems ok.
I think the only problem you're going to come accross is if a user has restricted or turned off javascript in their browser.
Although this is a concern for every developer, i think that people these days are less likely to turn off javascript as so many websites now depend on it for a lot of functionality. Our website won't work at all if you turn javascript off as the JSF is translated by javascript to html for the browser.
Something you could do to combat people not having javascript enabled is to have an error message that is displayed when javascript is dissabled informing your users that this may cause problems when using the website and could interfere with accessibility.
Hope this is of some use.
Hannah
Share: