CPSnet Web Awards Program, awards for sites skies above.
- Check the latest winners:
- Ydeveloper, 2005-06
- Jazz in Azerbaijan, 2005-07
- afreeCodec, 2005-07
CSS is not supported or is currently disabled. The page is still completely usable.
Developing a "Text-Version" script
Please note that this page makes extensive use of JavaScript as it shows the application of several functions developed for javascript-enabled browsers. If your browser does not support JavaScript, some or most of the features on this page will be unavailable.
What a "Text transcoder", like that at UsableNet (LIFT Text Transcoder) does is linearize the page, i.e. remove any tables, disable any CSS style and/or stylesheet and toogle images OFF. So... if we have a way of having those scripts running in a painless way, we can have our own "text transcoder". Remember that this can help you through your AAA compliance... if you can not make a given page accessible, provide an alternative accessible version.
We have been developing such a script, still being coded in javascript (so not entirely accessible). This script consists of four main functions, described below, and it is based on the excellent NILS Accessibility Toolbar for Internet Explorer.
Function removeImages()
Unloads any image currently loaded. Does not apply to images used
as background, if used my means of a CSS declaration like background-image.
Works with: IE6, Firefox, Netscape7 (Win98SE).
if(document.images.length > 0){ (function(){ function
to(c) { var a,k; a=new Array; for(k=0;k < c.length;++k) a[k]=c[k];
return a;} var im,img,xt; im=to(document.images); for(var
i=0;iim.length;++i){ img=im[i]; e=document.createElement('span');
void(e.style.background='#f5deb3'); void(e.style.color='navy');
if(img.attributes.alt.specified!=true) {xt=document.createTextNode('NoAlt!')}
else {xt=document.createTextNode(img.alt+' ')}e.appendChild(xt);
img.parentNode.replaceChild(e,img)}})();} else {history.go()}
}
Function linearize()
Removes any table (linearizes the content of any table). Works with: IE6, Firefox, Opera7.23 (Win98SE)
var H=[],Y={TABLE:1,TR:1,TD:1,TH:1,CAPTION:1,DIV:1},d=[],p;
function R(N){ var a,x,i,t; if(t=N.tagName){ t=t.toUpperCase();
for (i=0;a=H[i];++i) if(N.getAttribute(a))N.removeAttribute(a);
for(i=0;x=N.childNodes[i];++i)R(x); if (Y[t])d.push(N); }
} R(document.documentElement); for (i=0;N=d[i];++i) { p=N.parentNode;
while(N.firstChild)p.insertBefore(N.firstChild,N); p.removeChild(N);
} }
Function disableInlineStyles()
Disables any inline CSS (used with <tag style="...").
Works with: IE6, Firefox, Netscape7, Opera7.23 (Win98SE)
var H=["style"],Y={},d=[],p; function R(N){
var a,x,i,t; if(t=N.tagName){t=t.toUpperCase(); for(i=0;a=H[i];++i)if(N.getAttribute(a))N.removeAttribute(a);
for(i=0;x=N.childNodes[i];++i)R(x);if(Y[t])d.push(N);}}R(document.documentElement);
for(i=0;N=d[i];++i){ p=N.parentNode; while(N.firstChild)p.insertBefore(N.firstChild,N);
p.removeChild(N);}}
Function disableStyle()
Disables the externally linked stylesheet. Works with: IE6, Firefox, Netscape7, Opera7.23 (Win98SE)
function disableStyle() { if (!document.getElementsByTagName)
return; var anchors = document.getElementsByTagName("link");
for (var i=0; i < anchors.length; i++) {var anchor = anchors[i];
if (anchor.getAttribute("rel") == "stylesheet")
anchor.disabled = "true";}}
The steps to call this text transcoder
1. Add to the <head>:
<script type="text/JavaScript"> src="http://www.yoursite.com/textversion.js" </script>
2. Create a link in the page you want to "textualize":
<a href="#top" onclick="removeImages();
linearize(); disableStyle();disableInlineStyles(); return false;" title="Text
Version">Text Version</a>
When you click this link, the all page is converted to a text-only page... note, do not use the removeImages() if your pages do not have images (excluding background ones) in it. To reload all the styles applied, all you have to do is hit "Refresh" in your browser.
You can call all these functions by selecting the link "Text-Version" in this page's header. This will execute all the functions in the order they are displayed above.
Note that you may use some of the functions only. The full script call is done this way:
<a href="#top" onclick="removeImages();
linearize(); disableStyle();disableInlineStyles(); return false;" title="Text
Version">Text Version</a>
In order to use only one or some of the functions, you may use, for instance:
<a href="#top" onclick="disableStyle();disableInlineStyles();
return false;" title="Text Version">Text Version</a>
Next developments for this script
Contributions, suggestions and bug reports are welcome! Please send it to webawards@cpsimoes.net
- Convert the javascript function to accept the URL as a parameter,
like:
textversion(http://wwww.xpto.com) - Create a server-side script (php, perl) so that we do not have to rely on javascript.
In the meantime, if you find it useful, you have our permission to use the script as it is now. You can download the textversion.js file for free and use it as long as the notice in the script remains unchanged.
Trademarks or registered trademarks
UsableNet(tm) and LIFT Text Transcoder are registered trademarks of UsableNet, a company specialized in developing systems and services for testing websites against accessibility and usability standards.