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:
<div id="hiddenDiv" style="display: none;">
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.css is loaded, applying the
display value of none to the togglable div.
If a user has JavaScript disabled, javascript-overrides.css is not loaded, meaning
the togglable div contents are visible.
See the collapsible-div-accessible folder within the chapter 5 folder for reference
files.

Enhancing links with JavaScript

 enhanced interactivity and functionality to links. Note that in all cases, a non-JavaScript
backup (or fallback) to essential content is required for those who choose to surf the Web
with JavaScript disabled. In all cases, JavaScript can be added either to external JavaScript
files attached to your HTML documents (which is the preferred method; see the section
“Attaching favicons and JavaScript” in Chapter 2) or in a script element within the head
of the HTML page:
<script type="text/javascript">
// <![CDATA[
(script goes here)
// ]]>
</script>
Specifically, we’ll look at pop-up windows, swapping images using JavaScript, and toggling
div visibility with JavaScript.

Enhancing skip navigation with a background image

1. Position the skipNav div. Add the following link to remove the skipNav div from
the document flow and position it at the top of the web page. The width and
text-align property values stretch the div to the full width of the browser window
and center the text horizontally, respectively.
#skipLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
2. Style the skip navigation link. Add the following rule to style the link within the
skipLink div. By setting display to block, the active area of the link stretches to
fill its container, thereby effectively making the entire containing div clickable. The
padding-bottom setting is important, because this provides space at the bottom of
the div for displaying the background image used for the hover state, added in the
next step. The color value is black (#000000) at this point, which ensures that the
text fits happily within the space available above the page content. (This may
change for users with non-default settings, but for the default and first zoom setting,
it’ll be fine.)
#skipLink a:link, #skipLink a:visited {
display: block;
color: #000000;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}

3. Recolor the skip navigation link. Change the color property so that the link blends
into the background.
#skipLink a:link, #skipLink a:visited {
display: block;
color: #fefefe;
font: 1.0em Arial, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom: 20px;
}
4. Define the hover and focus states. Add the following rule to set the style for the
hover and focus states. This essentially makes the text visible (via the color setting)
and defines a background image—a wide GIF89 image with a downwardfacing
arrow at its center now appears when the user places their mouse cursor
over the top of the web page.
#skipLink a:hover, #skipLink a:focus {
color: #000000;
background: url(skip-navigation-down-arrow.gif) 50% 100% no-repeat;
}