Developer Checklist — JavaScript Appendices

Correct code

JS_G_A4: Functionality that relies on JavaScript should not be present when JavaScript is unavailable

This example shows two different ways of ensuring that scripted functionality is not present when JavaScript is unavailable, both illustrated using Print this page links:

  1. The first link (1) is static HTML, which is hidden using display:none that's applied through a CSS class. The content is then displayed again by adding an additional "script-enabled" class, and that's done with JavaScript
  2. The second link (2) is not present in static HTML at all, the content itself is generated with JavaScript

The second approach is best, because it means that the content will not re-appear when CSS is also unavailable. However that's not a very common situation, and sometimes the amount or complexity of the HTML makes it impractical to generate through scripting. So the first approach is acceptable if necessary.

Live Demo

Print this page (1)

JavaScript Code

The JavaScript code for this example can be found in: JS_G_A4.js

The CSS for this example can be found in: JS_G_A4.css