WEB STANDARDS CREATIVITY

254
// set the height to a new value
thiselt.style.height = newHeight + "px";
// if the height is now zero, we need to remove the "exposed" state
// set the height back to the original height and clear the JS set
// value for height so that it is reset to the value found in the
// original CSS
if (thiselt.offsetHeight == 0) {
thiselt.className = thiselt.className.replace(/exposed/g,'');
//force a repaint for getting around Safari rendering issue
thiselt.innerHTML = thiselt.innerHTML + '';
thiselt.style.height = '';
}
}
function Reveal(elt, dH) {
// prevent the function from doing anything if it is already active
if (moving) return;
var thiselt = document.getElementById(elt);
if (/exposed/i.test(thiselt.className)) {
// if we are exposed, we want to slide the pane up instead of down
dH = -dH;
// if we are sliding up, then we want to reset the overflow to hidden
thiselt.style.overflow = "hidden";
} else {
// this opens the tab and respects classes that already exist
thiselt.className += " exposed";
}
moving = true;
// run the changeHeight function at the specified interval;
// will run until we clear the interval
revealTimer = setInterval("changeHeight('" + thiselt.id "','" + dH + "')", SLIDEINTERVAL);
}
Where does the accessibility come in to it?
The core of this script is accessible because it is interoperable. That gives us the following benefits:
It works with scripting on or off.
It uses the core behaviors inherent to HTML, namely simple links to other spots on the same page.
We are (generally speaking) changing the CSS only for components of the page, and we aren’t changing any CSS using
display: none (which is notorious for removing elements from the internal DOM of a screen reader; see http://
css-discuss.incutio.com/?page=ScreenreaderVisibility for a discussion of this often frustrating behavior).
All links allow for keyboard activation. We didn’t do anything to enable that; it is built-in behavior. In our scripting,
we made sure not to do anything that *takes away* keyboard functionality.
This is good news, but it doesn’t mean that we are free and clear of further obligation. To make sure that this solution is
really accessible, we need to do some additional testing. Let’s take a look at some of those tests.