J
johkar
The below script claims to be written in an accessible manner (sorry I
can't seem to locate the original site/author). Is this script truly
accessible, and if so, what pieces of the function make it accessible
to screen readers? Is it merely the fact that rather than setting the
display to "none" onload or with CSS, it is "hiding" it by moving it
off the visible page?
As a side question, I don't really understand how this piece of the
code works:
window.onload = function(){
oldfn();
fn();
};
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Show hide example page</title>
<style type="text/css">
body {
margin: 10px;
}
..hidden {
position: absolute;
left: -1500em;
}
</style>
<script type="text/javascript">
addLoadListener(init);
var elmtohide;
function init(){
elmtohide = document.getElementById("elmtohide");
if(elmtohide)
elmtohide.className="hidden";
var showCaption = document.getElementById("Example");
if(showCaption)
showCaption.onclick=showOptional;
var hideCaptiona = document.getElementById("Example2");
if(hideCaptiona)
hideCaptiona.onclick=hideOptional;
return true;
}
function showOptional(){
if(elmtohide)
elmtohide.className="";
return true;
}
function hideOptional(){
if(elmtohide)
elmtohide.className="hidden";
return true;
}
function addLoadListener(fn){
if(typeof window.addEventListener != 'undefined'){
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined'){
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined'){
window.attachEvent('onload', fn);
}
else{
var oldfn = window.onload;
if (typeof window.onload != 'function'){
window.onload = fn;
}
else{
window.onload = function(){
oldfn();
fn();
};
}
}
}
</script>
</head>
<body>
<form name="dataform" action="sample.do" method="post">
<p>
<input name="Example" id="Example" type="radio" value="example">
<label for="Example">Option 1</label>
<br>
<input name="Example" id="Example2" type="radio" value="blank">
<label for="Example2">Option 2</label>
</p>
<div id="elmtohide">
<p><label for="Caption">Enter Caption:</label>
<input name="Caption" id="Caption" type="text" size="30"
maxlength="30">
</p>
</div>
<p><label for="Name">Name:</label>
<input name="Name" id="Name" type="text" size="30"
maxlength="30">
</p>
</form>
</body>
</html>
can't seem to locate the original site/author). Is this script truly
accessible, and if so, what pieces of the function make it accessible
to screen readers? Is it merely the fact that rather than setting the
display to "none" onload or with CSS, it is "hiding" it by moving it
off the visible page?
As a side question, I don't really understand how this piece of the
code works:
window.onload = function(){
oldfn();
fn();
};
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Show hide example page</title>
<style type="text/css">
body {
margin: 10px;
}
..hidden {
position: absolute;
left: -1500em;
}
</style>
<script type="text/javascript">
addLoadListener(init);
var elmtohide;
function init(){
elmtohide = document.getElementById("elmtohide");
if(elmtohide)
elmtohide.className="hidden";
var showCaption = document.getElementById("Example");
if(showCaption)
showCaption.onclick=showOptional;
var hideCaptiona = document.getElementById("Example2");
if(hideCaptiona)
hideCaptiona.onclick=hideOptional;
return true;
}
function showOptional(){
if(elmtohide)
elmtohide.className="";
return true;
}
function hideOptional(){
if(elmtohide)
elmtohide.className="hidden";
return true;
}
function addLoadListener(fn){
if(typeof window.addEventListener != 'undefined'){
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined'){
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined'){
window.attachEvent('onload', fn);
}
else{
var oldfn = window.onload;
if (typeof window.onload != 'function'){
window.onload = fn;
}
else{
window.onload = function(){
oldfn();
fn();
};
}
}
}
</script>
</head>
<body>
<form name="dataform" action="sample.do" method="post">
<p>
<input name="Example" id="Example" type="radio" value="example">
<label for="Example">Option 1</label>
<br>
<input name="Example" id="Example2" type="radio" value="blank">
<label for="Example2">Option 2</label>
</p>
<div id="elmtohide">
<p><label for="Caption">Enter Caption:</label>
<input name="Caption" id="Caption" type="text" size="30"
maxlength="30">
</p>
</div>
<p><label for="Name">Name:</label>
<input name="Name" id="Name" type="text" size="30"
maxlength="30">
</p>
</form>
</body>
</html>