JavaScript-created markup also needs to be semantic and accessible

Back in the day you used to be able to view source on a web page to see the markup used to create it. These days, on many sites, a large portion of the markup is not visible when you view source because it is inserted by JavaScript functions.

That isn’t necessarily a problem provided that you use progressive enhancement and unobtrusive JavaScript. If you follow those principles, content and basic functionality will still be there when scripting is unavailable. Many of us understand that. But one thing I’ve noticed is that some developers forget to consider semantics or accessibility in the markup they use JavaScript to insert.

To the browser, and by extension any assistive technology that runs on top of the browser, it makes no difference if the elements in the DOM are created from real markup in an HTML file or if they are inserted with JavaScript. In other words, non-semantic and bloated markup is no less non-semantic and bloated just because you can’t see it when you view source. Browsers, screen readers, and users all have to deal with it anyway.

Want examples? Just go browse the jQuery Plugins site and check out a few demos. Or you can take a closer look at some social media “widgets” or “badges” that you can put on your site by linking to a JavaScript file. View source to see the real markup. Then use Inspect Element in your favourite developer tool to see what the actual DOM looks like. In many, many cases it is a horrifying, incomprehensible mess of nonsensical, non-semantic markup. That mess is what the end user has to deal with, not the potentially nice and clean markup that is in the HTML file.

Don’t get me wrong here. I am not saying that you shouldn’t use JavaScript to insert markup. It often makes great sense to do so. If some functionality you need is completely dependent on JavaScript, you should definitely use JavaScript to insert any extra markup that is necessary.

What I am saying is that you need to take the same care to make JavaScript-inserted markup semantic and accessible as you do with the markup that is in your actual HTML file.

Posted on November 10, 2011 in JavaScript, Accessibility, (X)HTML