JavaScript and Accessibility. Pt. 3. | 2 | WebReference

JavaScript and Accessibility. Pt. 3. | 2

To page 1current page
[previous]

JavaScript and Accessibility. Pt. 3

As you can see, it’s just a list. If you disable CSS, you’ll see an unordered list with unordered sub-lists. That means that you can just use simple HTML to create an unordered list of your site’s menu, and then format it with CSS. Take note of the classes applied to the menu items that have sub-menus and the classes applied to those sub-menus. Those are necessary for our menu. Let’s look at the CSS, shall we?

#nav li
    { behavior: url('CSSNavIEHover.htc');
    }

body
    { font-family: Arial, sans-serif;
    }

a
    { color: #113;
        text-decoration: none;
    }

#nav a
    { width: 100%;
        display: block;
    }

#nav ul
    { display: block;
        margin: 1em 1ex;
        padding: 0px 1ex;
        width: 7em;
    }

#nav li
    { display: block;
        list-style: none;
        padding: 0.1em 1ex;
    }

#nav li:hover, #nav li.hover
    { background: #eef;
    }

#nav ul.sub1, #nav ul.sub2, #nav ul.sub3
    { position: absolute;
        margin: -0.75em 0px 0px 6em;
        border: solid #113 1px;
        padding: 1em 0.5em;
        background: #aaf;
        width: 7em;
        display: none;
    }

#nav ul.root li:hover ul.sub1, #nav ul.root li.hassubhover ul.sub1
    { display: block;
    }

#nav ul.sub1 li:hover ul.sub2, #nav ul.sub1 li.hassubhover ul.sub2
    { display: block;
    }

#nav ul.sub2 li:hover ul.sub3, #nav ul.sub2 li.hassubhover ul.sub3
    { display: block;
    }


#nav li.hassub
    { background: url('plus.gif') no-repeat 90% 50% ;
    }

#nav li.hassub:hover, #nav li.hassubhover
    { background: url('plush.gif') no-repeat 90% 50% ;
    }

You’ll notice the “behavior” property. Gasp! That isn’t a valid CSS property! It isn’t, but Internet Explorer thinks it is. Here’s what’s in that file, and why we’re using it. Create a new text file, paste in that code, and save it with the “.HTC” extension so that we can use a hover class for Internet Explorer.

All of the links (A elements) in the “nav” DIV are set at block-level and 100% width. This means that they will be 100% of the width of the element they are in; they will also start a new line and any element will also have a new line after it. See: definition of block-level. All unordered lists in the “nav” DIV are set to display as block and given a width of 7em, and all list items in those lists have their bullets removed and get a little extra padding.

Here comes the fun part. When you hover over any list item, it gets a background color. Since the “hover” pseudo-class isn’t supported in Internet Explorer, we add the “.hover” class. The “.HTC” file we included earlier will indicate that whenever we hover over an element, its class is “hover.”

Note: multiple classes are supported; the hover class is added to any class or classes that already exist, and removed when the mouse is taken off of the element.

Next, all of the sub menus are hidden - unordered lists with the class “sub1,” “sub2,” or “sub3.” This is because these are the menus that should appear when we put our mouse over the parent list item of each (list items in the “root” list). All of the list items in the root list (not any of the sub lists) display the sub lists below them by setting their “display” property to “block.” You might recall that originally, we defaulted all of the sub lists to “display none.” This is done individually for all three sub-lists. Notice that the first rule displays the “sub1” menu when you hover over a list item in the “root” menu; in the second rule, when you hover over a list item in the “sub1” menu, it displays the “sub2” menu; and likewise, the third rule displays the “sub3” menu when you hover over a list item in the “sub2” menu. In the event that there is no sub menu available for an item, nothing will appear since nothing exists.

The last two rules are for adding those arrows to elements that have sub menu items. We added the class “hassub” to the menu items that had one or more menus. We add a background to this class to show our arrow, and we change it by using the “hover” pseudo-class (or the “hover” class for Internet Explorer). As mentioned earlier, this technique is not the only one; there are others out there, but this one is my preference.

Proprietary Alternatives

As I said earlier, there are some proprietary codes that work – or should work – only in Internet Explorer. It’s wise to avoid using these properties, since they don’t conform to the W3C recommendation. Instead, a better idea is to use the codes specified in the DOM.

Document.all

The “document.all” object is an array collection of all of the elements with names or ID’s on the web page. So if you have a DIV with the ID “myDiv,” you could refer to the “myDiv” object with document.all[“myDiv”]. This is IE-proprietary, though. Instead, a better option is the getElementById() method, which is used in a similar way: document.getElementById(“myDiv”) refers to the DIV object with the ID “myDiv.” When there are multiple elements with the same ID (although this should never be the case), this method will return the first one; document.all returns a collective array of those elements with the same ID, which is more likely to result in undesired results.

innerHTML

A common property used to change the HTML within an element is the innerHTML property. You use the innerHTML property by referring to an element and then setting its value. Using our above example with the getElementById method, you would set this property with document.getElementById(“myDiv”).innerHTML = “<p>Hello, World!</p>”;. An alternative to this is to update the text within an element: document.getElementById(“myDiv”).firstChild.data = “Hello, World!”;. The “data” property will not process HTML code, so if you want to add an HTML element, you have to create it. In fact, it is almost exactly the same as the “innerText” property, which also shouldn’t be used (since it is also proprietary and only works in Internet Explorer). Here’s a quick example:

<script type="text/javascript"><!--
   onload = function(){
      var p = document.createElement("P");
          p.setAttribute("style","font-family:arial");
          p.setAttribute("id","myPara");
          p.appendChild(document.createTextNode("Hi, this is what I have to say!"));
      document.body.appendChild(p);
      window.setTimeout("updatePara()", 5000);
   }
   function updatePara(){
      if(document.getElementById && document.getElementById("myPara")){
      document.getElementById("myPara").firstChild.data = "Hi, I changed the message five seconds later!";
   }
 }
//--></script>

Conclusion

In conclusion, here’s a recap:

Thanks for reading this article. I hope it promotes the use of proper, valid JavaScript and other coding techniques. The Internet’s information should be available to anyone, regardless of race, nationality, background or disability. Let’s make the Internet a better place, for all of us.

About the Author

Jonathan Fenocchi is a Web developer who primarily works in the fields of Web Design, client-side scripting, and PHP scripting. His web site is located at: www.cmmwebdesign.com

To page 1current page
[previous]

Created: March 27, 2003
Revised: February 28, 2005

URL: https://webreference.com/programming/javascript/Jf/column10/1