Replacing <noscript> with accessible, unobtrusive DOM/JavaScript
Introduction
In his book "ppk on JavaScript", Peter-Paul Koch points out that the <noscript>
element has a limitation. Modern user agents with JavaScript enabled will hide content contained
within the <noscript></noscript>
tags, and reveal it when JavaScript is disabled. User agents that do not support JavaScript will display the content within it. User agents with partial/antiquated JavaScript capabilities however interpret
the element correctly and do not show the content, but when JavaScript is disabled also do not show the content — it never gets seen. This has an impact on the accessibility of the content. If your writing is targeted at modern, standards-based,
compliant, and fully capable JavaScript user agents, employing the <noscript> element is no problem. If the user agents among your audience are unpredictable, however, replacing the <noscript>
element with another mechanism becomes
significant. This article looks at one such solution.
The solution
So, how can the behavior intended by the <noscript>
element be enabled in these antiquated/partially-capable JavaScript user agents? The workflow for my solution is as follows:
- Insert an unobtrusive JavaScript "hook" via an
id
attribute value in the parent container's opening tag. - Associate the "hook" with an external JavaScript function, which sets up a parent-to-child relationship between the container and its content.
- When JavaScript is enabled, the external function keeps the alternative content hidden.
- If the user agent cannot interpret the JavaScript expressions, the alternative content in the markup is revealed.
- When JavaScript is disabled the function no longer works, and the alternative content in the markup is revealed. This ensures graceful degradation of the script.
Important Note: if the ability to hide the alternative content with JavaScript does not exist, the browser/user agent will be able to render the content ensuring accessibility and graceful degradation.
Building the Markup
In this section you'll build up the markup portion of the example.
- In the
<head></head>
tags of the web page, insert a<script>
element containing the path to the externalnoscript.js
JavaScript file: - Create a
<div></div>
within the<body></body>
tags to contain the hidden content. - Give the opening tag of the
<div>
element anid
attribute with a value of"noscript"
, that is,<div id="noscript">
— this sets the unobtrusive hook to the external JavaScript functionnoscript()
. - Place all elements and content to be hidden while JavaScript is enabled within the
<div id="noscript"></div>
container.
The following web page markup sample illustrates this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>noscript_example</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <script src="scripts/noscript.js" type="text/javascript"></script> </head> <body> <div id="noscript"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <ul> <li><a href="#">Hyperlink A</a></li> <li><a href="#">Hyperlink B</a></li> </ul> </div> </body> </html>
Building the unobtrusive DOM/JavaScript
In this section I'll take you through building up the two main sections of the JavaScript.
Writing the if()
portion of the function
- Between the
if
parentheses, place thedocument.removeChild
expression — this tests to see if it is supported by the user agent.- If it is supported the function will continue, and the
div
content will remain hidden. - If it is not supported the function progresses to the
else if()
statement and tests it.
- If it is supported the function will continue, and the
- Declare the container
div
element and identify itsid
value as the external, unobtrusive "hook" to the markup. - Instruct the parent
div
to remove all child content within it.
Writing the else if()
portion of the function
- Between the
else if
parentheses, place thedocument.getElementById
expression to test if it is supported by the user agent.- If it is supported the function will continue, and the
div
content will remain hidden. - If it is not supported the function will end, and the
div
content will be revealed, establishing graceful degradation of the script.
- If it is supported the function will continue, and the
- Return the element
id
where the style will be applied. - Set its
style.display
to "none" to control the presentation aspect of the child content.
The following script is contained in the noscript.js
file, which is kept external, and linked to the web page as described in the "Building the Markup" section.
/* noscript.js */ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload !== "function") { window.onload = func; } else { window.onload = function () { if (oldonload) { oldonload(); } func(); }; } } var noscript = addLoadEvent(noscript); addLoadEvent(function () { /* more code to run on page load */ }); function noscript() { if (document.removeChild) { var div = document.getElementById("noscript"); div.parentNode.removeChild(div); } else if (document.getElementById) { document.getElementById("noscript").style.display = "none"; } }
Summary
This article demonstrates a solution that replaces the <noscript>
element with an external, unobtrusive JavaScript function. The noscript()
function solves the problem that partially-capable/antiquated
JavaScript user agents have with not revealing alternative content if JavaScript is disabled. Employing this function, they will reveal the content as intended. This ensures graceful degradation of the script, and full accessibility to the alternative
content. Please feel free to comment on anything you think could be improved upon.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Comments
The forum archive of this article is still available on My Opera.