USING LINKS AND CREATING NAVIGATION
191
5
Enhancing accessibility for collapsible content
Although the old version of the Images from Iceland site looks good, it has a problem in
common with the previous exercise: when JavaScript is disabled, the initially hidden content
is inaccessible. The Iceland site was quickly knocked together a number of years back
and has been superseded with a new site, but for any site developed today, there should
be no excuses.
In the previous exercise, the hidden content is set to be hidden by default and the display
property is toggled via the JavaScript function. What therefore needs to be done is to
make the content visible by default and then override this, making it invisible, but only if
the user has JavaScript. The first thing to do is remove the style attribute from the following
line of code:
Next, a style sheet is created (named javascript-overrides.css for this example), with a
rule that targets the relevant div and sets display to none.
#hiddenDiv {
display: none;
}
Finally, amendments are made to the JavaScript file, adding some lines that attach the new
JavaScript document to the web page:
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', 'javascript-overrides.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
The results of this are the following:
If a user has JavaScript enabled, javascript-overrides.
Pages:
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285