Accessible Scripting 101: Discussion

@fredmvApr 09.2005

See the relevant sticky:

~~[url]~~https://webdeveloper.com/forum/showthread.php?t=62111[/url]

What do you think? Got anything to add?

to post a comment

26 Comments(s) _↴

@VladdyApr 09.2005 — #Since the rotating banners seemed to be the favourite topic of the week, I'm making the first submission:

[b][CENTER][SIZE=4]LESSON 1. Rotating Banners.[/SIZE][/CENTER][/b]
[i][b]Shrek[/b]: - For your information, there's a lot more to ogres than people think.

[b]Donkey[/b]: - Example?

[b]Shrek[/b]: - Example? Okay. Uh... ogres are like onions.

[b]Donkey[/b]: - They stink?

[b]Shrek[/b]: - Yes. No!

[b]Donkey[/b]: - Oh, they make you cry?

[b]Shrek[/b]: - No!

[b]Donkey[/b]: - Oh, you leave them out in the sun, they get all brown and start sprouting little white hairs.

[b]Shrek[/b]: - No! Layers! Onions have layers. Ogres have layers. Onions have layers. You get it? We both have layers. [/i][/QUOTE]

[b]Fundamental Accessibility Principle[/b]

Separation of structure from presentation is the cornerstone of accessible web design. This is the first [url="http://www.w3.org/TR/WCAG10-CORE-TECHS"]core technique[/url] 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 [b]on top[/b] 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.

[b]Rotating Banner Requirements[/b]

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.

[b]Core Layer - Document Structure - HTML[/b]

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:

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

[b]Presentation Layer - CSS[/b]

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:

<i>
 </i>#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:

<i>
 </i>#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.

<i>
 </i>#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.

[b]Advanced Functionality Layer - Javascript[/b]

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

<i>
 </i>function lIterator(listElement,delay)
 { /* Constructor */ 
 
 <i>    </i>/* 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:

<i>
 </i>    for(var i=listElement.childNodes.length-1; i&gt;=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

<i>
 </i>    for(var i=1; i&lt;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:

<i>
 </i>    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:

<i>
 </i>/* 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:

<i>
 </i>    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:

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

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

<i>
 </i>/* 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;
 
 <i>	</i>	this.currentLI.style.display = 'block';
 <i>	</i>  }

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:

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

[b]Lesson 1 Quiz.[/b]

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

@BigMoosieApr 09.2005 — #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?

@JonaApr 09.2005 — #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?[/QUOTE]
[i]Originally posted by fredmv[/i]

[b]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).[/b][/quote]

[font=trebuchet ms]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.[/font]

@UltimaterApr 10.2005 — #First of all, I appricate you, [color=royalblue]fredmv[/color], 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 [color=royalblue]scripts[/color] 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).
[/QUOTE]

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.

@HaganeNoKokoroApr 10.2005 — #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.

@JonaApr 10.2005 — #[font=Trebuchet MS]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:[/font]

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

[font=trebuchet ms]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:[/font]

<i>
 </i>&lt;p id="myPara"&gt;Some text.&lt;/p&gt;
 &lt;script type="text/javascript"&gt;&lt;!--
 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);
 }
 //--&gt;&lt;/script&gt;

@UltimaterApr 10.2005 — #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?

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

@JonaApr 10.2005 — #[font=Trebuchet MS]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.[/font]

@BigMoosieApr 10.2005 — #EDIT: what that JONA sayed ^ ?

@UltimaterApr 10.2005 — #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.

@JonaApr 10.2005 — #[font=Trebuchet MS]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.[/font]

@UltimaterApr 26.2005 — #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 [b]only[/b] when JavaScript is disabled.

(If JavaScript is enabled, the tag's contents is totally ignored.)

Here is a starter-level example:

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

@JonaApr 26.2005 — #[font=Trebuchet MS]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.[/font]

@BigMoosieApr 26.2005 — #So perhaps a better solution would be:

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

@UltimaterApr 26.2005 — #I also thought of that but I don't see what's wrong with the NOSCRIPT tag.

What's so bad about the NOSCRIPT tag!?

@JonaApr 27.2005 — #[font=Trebuchet MS]I will have to agree that the NOSCRIPT tag is the better solution in this case, but the script itself is impractical. Practical examples are usually the most convincing and also make the most sense.[/font]

@UltimaterApr 27.2005 — #How's the NOSCRIPT tag impractical?

@HaganeNoKokoroApr 27.2005 — #He didn't say the NOSCRIPT tag was impractical, he said we were using a bad (impractical) example of a script, because there's pretty much no situation you would hide text for the first 10 seconds after page load, then show it.

My example was something like this

&lt;script type="text/javascript"&gt;
 function exp(theId) {
 var elem=document.getElementById(theId);
 if(elem.style.display=="none") elem.style.display="block";
 else elem.style.display="none";
 }
 &lt;/script&gt;
 &lt;a href="#" onclick="exp('sec1');return false"&gt;Open/Close&lt;/a&gt;
 &lt;div id="sec1" style="display:none"&gt;
 Expanding / collapsing content goes here...
 &lt;/div&gt;

This creates a section that is initially hidden, but the user can show/hide the contents by clicking the link. Unfortunately, in the above, anyone without javascript will not be able to expand the hidden section.

Therefore, the hidden section must initially be visible, and then either right after it is created or on page load, be hidden by javascript

&lt;script type="text/javascript"&gt;
 function exp(theId) {
 var elem=document.getElementById(theId);
 if(elem.style.display=="none") elem.style.display="block";
 else elem.style.display="none";
 }
 &lt;/script&gt;
 &lt;a href="#" onclick="exp('sec1');return false"&gt;Open/Close&lt;/a&gt;
 &lt;div id="sec1" style="display:[color=red]block[/color]"&gt;
 Expanding / collapsing content goes here...
 &lt;/div&gt;
 [color=red]&lt;script type="text/javascript"&gt;
 document.getElementById("sec1").style.display="none";
 &lt;/script&gt;[/color]

so that the section will be visible for those without javascript.

@BigMoosieMay 02.2005 — #I feel like writing an accessible code but can't think of what to do. Anyone want to make a suggestion?

@BigMoosieMay 12.2005 — #Fine, I make it myself, but before it should be added I need somebody to make it look as good as it does in Firefox for Internet Explorer.

[URL=http://www.random.abrahamjoffe.com.au/public/JavaScripts/Accessibility101/index.htm]See the final result[/URL]

If you dont know how to turn of JavaScipt I have made a version without the Script tag [URL=http://www.random.abrahamjoffe.com.au/public/JavaScripts/Accessibility101/nojs.htm]here[/URL].

Ok, basically it is a page that allows instant tabbed navigation, if no JS then the tabs jump down the page (only in IE, not sure if possible with FF).

The greatest power of this script is that it is possible to bookmark one of the tabs! Thats right, bookmark the page after you change one of the tabs and comming back will load that tab, the same goes for refreshing, you stay at the selected tab.

If anybody could fix the CSS flaw and / or if they see that anything else could be improved, post your modifications here, once we agree it is [I]perfect[/I] then maby it will add to the collection?

@JonaMay 12.2005 — #[font=trebuchet ms]Good job. I’ve [url=http://www.alistapart.com/articles/eatcake/]seen this before[/url] (more than once — it was recently revisited but I can’t seem to find the link to the new “version” of it), but I like it nonetheless.[/font]

@BigMoosieMay 12.2005 — #Mine is superior, try refreshing theirs when on the last tab!

@BigMoosieJun 12.2005 — #Is this worth adding: http://www.random.abrahamjoffe.com.au/public/JavaScripts/Accessibility101/variable_selectbox.htm ?

Or is there a better way of populating select boxes?

@KaosAug 16.2006 — #I have a question about accesible scripting, what about when javascript is a necesary part on a web application for example? like the ajax applications that change the data without reloading the page using a js engine to comunicate with the server? if the user has no js, i don't see a way to 'gracefully' degrade the aplication...

taking away that functionality would mean having to go back to reloading the whole pages and maybe do a different process on the server side, so both the server scripts and the html document would have to suffer significative changes in order to degrade to a non js enviroment... i wouldn't call that 'gracefull' =D

@BigMoosieAug 17.2006 — #What about when javascript is a necesary part on a web application?[/QUOTE]

If it is a necessary part of the application then you should make it not possible for non-js users to access the page, simple as that. If you can provide an alternative then depending on the complexity it may be necessary to make two versions, in the same way the GMail does, but if they can be combined and allow the JS to [i]improve[/i] the non-js version then constructing it that way should be fairly elegant, maybe not on the server side but elegence is far less important there where you know what hardware is running it.

@KaosAug 17.2006 — #...in the same way the GMail does[/QUOTE]you mean by having an address for web public, and the other one for mobile phone puplic?

Apologise my ignorance but I haven't tested gmail, in anything different than IE, FF or OP... what about text browser? or the speech sintetizer browsers? what have gmail done about it? ?

I've also tested gmail on a Nokia 6265 browser (the actual gmail site, not the mobile version) and it seems to drop all the ajax functionality and go for a classic whole-page-reloads scheme, it's a totally different site, maybe they just automatically switch me to the mobile version without me noticing it?? ?

Also in #JavaScript _↴

2 java scripts Different OS different Content in Iframe On Submit - Two Scripts to be verified

Success!

Help @fredmv spread the word by sharing this article on Twitter...

Tweet This

Accessible Scripting 101: Discussion

26 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Accessible Scripting 101: Discussion

26 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

26 Comments(s) _↴

Also in #JavaScript _↴