Accessible Scripting 101: Discussion

[fredmv]

See the relevant sticky:

http://webdeveloper.com/forum/showthread.php?t=62111

What do you think? Got anything to add?

[Vladdy]

Since the rotating banners seemed to be the favourite topic of the week, I'm making the first submission:

LESSON 1. Rotating Banners.

Shrek: - For your information, there's a lot more to ogres than people think.
Donkey: - Example?
Shrek: - Example? Okay. Uh... ogres are like onions.
Donkey: - They stink?
Shrek: - Yes. No!
Donkey: - Oh, they make you cry?
Shrek: - No!
Donkey: - Oh, you leave them out in the sun, they get all brown and start sprouting little white hairs.
Shrek: - No! Layers! Onions have layers. Ogres have layers. Onions have layers. You get it? We both have layers.

Fundamental Accessibility Principle

Separation of structure from presentation is the cornerstone of accessible web design. This is the first core technique that is discussed whenever the subject of accessibility is brought up. This separation is achieved by using HTML to describe document structure and CSS to describe document presentation for different types of media.
The two are often compared to layers, HTML being the core layer accessible to all devices and CSS an optional outer layer for the devices capable of interpreting it.

When it comes to accessibility and client side scripting the same methodology should be applied. Scripting is just another layer that provides advanced functionality on top of the existing content and presentation.

Any web site will have up to three layers:
- HTML defining document structure
- CSS defining document presentation
- JS providing additional functionality

When these layers are designed from core out, the accessibility is assured by the design process - each underlying layer is made to work before proceeding to the next one.

Rotating Banner Requirements
Links to affiliate web sites are not only for human visitors. Actually, human visitors rarely use those links - just think about how many times did you click on an advertisement banner in the past day or week. The greater advantage for having other sites link to yours is the better search engine rating. But this will only work if these links are accessible to the search engine bots.
Therefore, it only makes sense to have all affiliate links that make up rotating banners presented in HTML code.

Core Layer - Document Structure - HTML
The proper presentation for rotating banners is the list of links that can optionally be enclosed within a block element that also contains a heading:

<div id="banners">
  <h4>Affiliate Links</h4>
  <ul>
    <li><a href="www.google.com"><img alt="Search Web with Google" src="googlelogo.png"></a></li>
    <li><a href="www.yahoo.com"><img alt="Search Web with Yahoo" src="yahoologo.png"></a></li>
    <li><a href="www.msn.com"><img alt="Search Web with MSN" src="msnlogo.png"></a></li>
  </ul>
</div>

Presentation Layer - CSS
It is a reasonable assumption that the banner list will be placed towards the end of the HTML document while its presentation in the graphical browser will usually be at the top of the page. This can be achieved using the absolute positioning of the block containing the banners:

#banners
  { position: absolute;
    top: 10px; /* top coordinate */
    right: 10px; /* puts banners in the top right corner */
  }

Users of graphical browsers do not really need to see the header as the images are self explanatory. Also, the default border around images inside links is usually removed. And we want to make sure that there are no margins and padding that can affect presentation:

#banners h4
  { display: none;
  }

#banners img
  { border: none;
  }

#banners ul, #banners li, #banners a, #banners img
  { margin: 0;
    padding: 0;
  }

Another reasonable assumption is that all the banner images are of the same size. For illustration purposes let's say 200px wide by 80px high. We can make the height of the banners list the same as the images and setting the overflow to hidden will cause only the first banner visible as the default presentation of the page.

#banners ul
  { display: block;
    height: 80px;
    overflow: hidden;
  }

#banners li
  { display: block;
    list-item-style: none;
  }

Another option is to set the overflow to auto for the banners list so that visitors can scroll through the list of all banners, making them accessible without significant impact (extra scrollbar) on the presentation.

Advanced Functionality Layer - Javascript
Now that the banners were made accessible with the basic HTML and CSS design, we can add the extra scripting functionality that will show them one at a time automatically.
It is a good practice to encapsulate such behavior within a class (reasoning for this is beyond the scope of current discussion). I decided to name it lIterator (scripting literacy is as important as iterating through a list ). The basic template I use is as follows

function lIterator(listElement,delay)
  { /* Constructor */ 
    
    /* Dynamic Methods */
		 
  }
/* Static Properties */

/* Static Methods */

We start by writing the constructor for the class.
First order of business is to remove all extra nodes from the ul element passed to the constructor. These could be empty text nodes added to document tree by compliant browsers, comment nodes, or HTML nodes that do not belong within the list element:

    for(var i=listElement.childNodes.length-1; i>=0; i--) 
	    if(!/li/i.test(listElement.childNodes[i].nodeName))
		    listElement.removeChild(listElement.childNodes[i]);

Next step is to hide all the list items but first one

    for(var i=1; i<listElement.childNodes.length; i++)
	    listElement.childNodes[i].style.display = 'none';

Then add a dynamic property to the class that will store the pointer to the currently displayed list item:

    this.currentLI = listElement.firstChild;

Now, we need to address the timer function. Since the dynamic class method can not be passed to setInterval we create a static array containing all the class instances:

/* Static Properties */
lIterator.instances = new Array();

so that next step for the constructor would be to store the class there and add another property that stores its ID:

    this.id = lIterator.instances.length;
	lIterator.instances.push(this);

Now we can finish the constructor by calling the setInterval function that will start the iteration:

setInterval('lIterator.instances['+this.id+'].showNext()',delay);

All that is left to do is write the showNext() dynamic method:

/* Dynamic Methods */
	this.showNext = function()
	  { this.currentLI.style.display = 'none';
	    /* Following line is broken for readability */
		this.currentLI =
		    this.currentLI.nextSibling ?
                this.currentLI.nextSibling :
				this.currentLI.parentNode.firstChild;
        
		this.currentLI.style.display = 'block';
	  }

Now that the lIterator class is complete, instances need to be created when the page loads. Taking into consideration the HTML code above the onload event will be:

onload="new lIterator((document.getElementById('banners')).getElementsByTagName('ul')[0],1000);"

Lesson 1 Quiz.
What modifications have to be done to the JS code so that it can be used to implement the basic slideshow functionality?

[BigMoosie]

To make a script for this, can I just make an accessible script? Or do I have to go through it with detailed notes the way Vladdy has?

[Jona]

To make a script for this, can I just make an accessible script? Or do I have to go through it with detailed notes the way Vladdy has?

Originally posted by fredmv
If you feel you have a worthy addition (i.e., an accessible script), feel free to PM me. What you should first do, however, is create a thread here in the JavaScript section explaining what it does, an example of how it use it, etc. which will be left open for discussion among the other members (e.g., if they need help setting it up on their site).

Looks to me like you should create a thread with the script, some examples on its use, how to use it, and so on and so forth. So, yes, you must explain the basics of it, but it's advisable to explain it step-by-step. Helps to avoid confusion and questions by others who want to use it.

[Ultimater]

First of all, I appricate you, fredmv, giving us a "back door" to discuss your sticky, thanks!

Welcome to the "Accessible Scripting 101" thread. This thread will feature JavaScript scripts developed with accessibility in mind. In other words, these are scripts in which will degrade properly in the case that JavaScript isn't available to your end-user (which it isn't always, believe it or not).

I don't quite understand what kind of codes
(I wouldn't call anything relevant to the computer a "script" because scripts are for actors and programs are code for the computer)
that you are looking for.
If the user has javascript disabled, what do you want from him/her!?
are you telling me that there JavaScript statements that still work even when JS is turned off!?

Can you explain a bit clearer what you had in mind, please? I'm sorry if I'm the only one confused.

[HaganeNoKokoro]

The idea is to make scripts such that, even with scripting disabled, the user will not miss out on any important information.

For example, people often create sections of a page that are hidden and can be expanded/made visible with javascript. In this case, it is important that the hidden sections be visible at the start, and are then be hidden by the script, so that a user without javascript will be able to view all of the content.

[Jona]

Ultimater,

As the name suggests, JavaScript is a scripting language. I see no reason why the homonym should not be used. It refers to a specific kind of code (usually pretranslated if I'm not mistaken).

Anyway, what Fred is referring to when he says "degrade" is that the web site still works when JavaScript is disabled. In other words, say for some reason you want to update the content of a P tag ten seconds after the page loads. You can do this:

<p id="myPara"></p>
<script type="text/javascript"><!--
 if(document.getElementsByTagName) onload = function(){
   var t = setTimeout("document.getElementById('myPara').innerHTML = 'Some text.'; clearTimeout(t)", 10000);
 }
//--></script>

The problem, though, is that the content "Some text." will never be available to anyone without JavaScript. Instead of doing the above, you should make it degrade gracefully, like so:

<p id="myPara">Some text.</p>
<script type="text/javascript"><!--
 if(document.getElementById) document.getElementById("myPara").style.display = 'none';
 if(document.getElementById) onload = function(){
  var t = setTimeout('document.getElementById("myPara").style.display = "block"; clearTimeout(t)', 10000);
 }
//--></script>

[Ultimater]

Jona, I don't understand Why you changed the content inside of the SCRIPT tag.
Why couldn't you just leave the content inside of the SCRIPT tag alone?

<p id="myPara">Some text.</p>
<script type="text/javascript"><!--
 if(document.getElementsByTagName) onload = function(){
   var t = setTimeout("document.getElementById('myPara').innerHTML = 'Some text.'; clearTimeout(t)", 10000);
 }
//--></script>

[Jona]

Because users without JavaScript won't see what's in the SCRIPT tags. As a result, we need to have the content in the HTML already, and hide it as soon as it's loaded, then display it whenever we want.

[BigMoosie]

EDIT: what that JONA sayed ^

[Ultimater]

Oh, I see, so the purpose of your example is to have text which blinks on and off once...
Then you wanted users w/o JS enables to simply display the text but without any fancy maneuvers.

[Jona]

Not exactly.

The purpose of my example was to display text that is otherwise hidden ten seconds after the page loads. The first example was a bad way to do it, because if JavaScript was not enabled, the user would not ever get to see the text. The second example is an improvement, because users without JavaScript will see the text.

[Ultimater]

Well, 'cas I'm one of the intellectual type, I thought this should be introduced:
I personally think that the best way to back-up JavaScript is with the <NOSCRIPT> tag.
If you don't already know what the tag does, it is used to display its contents only when JavaScript is disabled.
(If JavaScript is enabled, the tag's contents is totally ignored.)

Here is a starter-level example:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"><!--
document.write("<font color=royalblue>JavaScript is enabled</font>")
//--></SCRIPT>
<NOSCRIPT>
<font color=red>JavaScript is disabled</font>
</NOSCRIPT>

[Jona]

I see the NOSCRIPT tag as a last resort. It makes things more flexible, easy, and manageable if you script with accessibility in mind. That way you don’t have to rely on the NOSCRIPT tag.

[BigMoosie]

So perhaps a better solution would be:

<SPAN style="color: red;" id="JSenabled">JavaScript is disabled</SPAN>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
var subject=document.getElementById("JSenabled");
subject.style.color="royalblue";
subject.firstChild.nodeValue="JavaScript is enabled";
//-->
</SCRIPT>