Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Main Menu

Sand Trail

Dyanmic Menu Accessibility Issues

Dynamic menus are viewed by many developers and administrators as a way to provide a large number of links without cluttering the screen by having all of the links visible at the same time. Typically, mouse pointer actions are used to selectively display sub-groups of links for users to select. The accessibility issues of dynamic menus are:

Accessible dynamic menus can be created by using unordered list markup (ul), CSS and some simple javascript for IE to emulate a CSS 2 function it does not support actively.

HTML Markup

ul
Use ul as a container for navigation bars and other lists of related links
ul:title
Use title to provide a descriptive label for the collection of links
li
Use li as a container for individual links in the navigation bar

CSS Properties

:hover and :focus psuedo elements
:focus and :hover are triggered by user input events and can be used to apply styling properties like display to selectively make sub-menus visible and invisible
display property
The display property controls the rendering of content, making it visible or invisible

Browser Compatibility

@import
@import can be used to hide CSS code related to dynamic menus from legacy browsers like Netscape 4.x and earlier
Child Selectors
Child CSS Selectors can be used to hide CSS propoerties from Internet Explorer 5.x and 6.0 since they do not support the child element selector, while Mozilla/Fiorefox and Opera do support child selectors

Related Accessibility Requirements

Section 508
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
1194.22 (l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
Web Content Accessibility Guidelines (WCAG 1.0)
6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]
8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1]
6.4 For scripts and applets, ensure that event handlers are input device-independent. [Priority 2]
13.4 Use navigation mechanisms in a consistent manner. [Priority 2]
13.5 Provide navigation bars to highlight and give access to the navigation mechanism. [Priority 3]

Pull Down Menu Example

Pull Down HTML Code

<div class="nav-pulldown" >

<ul id="nav-pulldown" title="Pull Down Menu Example">
  <li><a href="http://www.rst.uiuc.edu/default.htm">Home</a>

  <ul class="subnav" title="Home">
    <li><a href="http://www.rst.uiuc.edu/default.htm">Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/mission.htm">Mission</a></li>
    <li><a href="http://www.rst.uiuc.edu/history.htm">History</a></li>
    <li><a href="http://www.rst.uiuc.edu/events.htm">Events</a></li>
    <li><a href="http://www.rst.uiuc.edu/faculty.htm">Faculty/staff</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/current.htm">Graduate Students</a></li>
  </ul>
   </li>

  <li><a href="http://www.rst.uiuc.edu/undergrad.htm">Undergraduate</a>
    
  <ul class="subnav" title="Undergradaute">
    <li><a href="http://www.rst.uiuc.edu/undergrad.htm">Program Overview</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/admission.htm">Admission</a></li>
    <li><a href="http://www.rst.uiuc.edu/http://courses.uiuc.edu/cis/catalog/urbana/2005/Spring/LEIS/index.html">Courses</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/advising.htm">Advising</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/internship.htm">Internship</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/links.htm">Links</a></li>
  </ul>
   </li>

  <li><a href="http://www.rst.uiuc.edu/grad.htm">Graduate</a>
    
  <ul class="subnav" title="Graduate">
    <li><a href="http://www.rst.uiuc.edu/grad.htm">Program Overview</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/admission.htm">Admission</a></li>
    <li><a href="http://courses.uiuc.edu/cis/catalog/urbana/2005/Spring/LEIS/index.html">Courses</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/ms.htm">Masters</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/phd.htm">Doctorate</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/current.htm">Current Students</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/aid.htm">Financial Aid</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/links.htm">Links</a></li>
  </ul>
   </li>

   <li><a href="http://www.rst.uiuc.edu/research.htm">Research and Extension</a>
    
  <ul class="subnav">
    <li><a href="http://www.rst.uiuc.edu/research.htm">Research Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/research/labs.htm">Research Labs</a></li>
    <li><a href="http://www.rst.uiuc.edu/research/extension.htm">Extension</a></li>
  </ul>

   <li><a href="http://www.rst.uiuc.edu/alumni.htm">Alumni</a>
    
  <ul class="subnav">
    <li><a href="http://www.rst.uiuc.edu/alumni.htm">Alumni Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/alumni/advisory.htm">Alumni Advisory
      Board</a></li>
    <li><a href="http://www.rst.uiuc.edu/alumni/update.htm">Updates</a></li>
  </ul>
   </li>
<ul>

Pull Down CSS Code

div.nav-pulldown {
  margin-top: 1em;
  margin-bottom: 1em;
  background: #333366;
}

ul#nav-pulldown {
  margin: 0;
  margin-left: .5em;
  margin-right: .5em;
  padding: 0;
  padding-top: .25em;
  padding-bottom: .25em;
  color: #FFFFFF;
  background: #333366;
  border: 1px solid #333366;
}

ul#nav-pulldown li {
  margin: 0;
  padding: 0;
  display: inline;
  position: relative;
}

ul#nav-pulldown a {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: .125em;
  padding-bottom: .125em;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

ul#nav-pulldown li ul.subnav  {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  top: 1.25em;
  display: none;
  font-size: 100%;
  text-align: left;
}

ul#nav-pulldown li ul.subnav li a {
  margin: 0;
  padding: 0;
  display: block;
  padding-top: .125em;
  padding-bottom: .125em;
  font-size: 90%;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  width: 8em;
  border-left: 1px solid #333366;
  border-right: 1px solid #333366;
  border-bottom: 1px solid #333366;
}

ul#nav-pulldown li:hover ul.subnav {
  display: block;
}

ul#nav-pulldown li.over ul.subnav {
  display: block;
  top: 1.75em;
}

ul#nav-pulldown li.over a {
  color: #333366;
  background-color: #FFFFFF;
}

ul#nav-pulldown li a:link, div#nav-pulldown li a:visited  {
  color: #BBBBBB;
  background-color: #333366;
}

ul#nav-pulldown li a:link.selected, div#nav-pulldown li a:visited.selected  {
  color: #FFFFFF;
  background-color: #333366;
}

ul#nav-pulldown li a:hover, div#nav-pulldown li a:focus {
  color: #FFFFFF;
  background-color: #333366;
}

ul#nav-pulldown li ul.subnav a:link, div#nav-pulldown li ul.subnav a:visited  {
  color: #333366;
  background-color: #FFFFFF;
}

ul#nav-pulldown li ul.subnav a:hover, ul#nav-pulldown li ul.subnav a:focus {
  color: #FFFFFF;
  background-color: #333366;
}

Pull Down CSS Javascript for IE Compatibility

Internet Explorer implements the :hover CSS psuedo-property only for links and form controls, while other browser like Mozilla/Firefox and Opera support :hover for any element. :hover behavior can be simulated in IE using Javascript to insert or remove a CSS class with the properties that make the pop-ups visible.

Note: Opera must be set to identify itself as Opera and not as Internet Explorer for the function to work properly in Opera.

<script type="text/javascript">

function initNavPulldown() {

    if (document.all&&document.getElementById) {

    navRoot = document.getElementById('nav-pulldown');

    for (i=0; i<navRoot.childNodes.length; i++) {

      node = navRoot.childNodes[i];

      if (node.nodeName=="LI" || node.nodeName=="li") {

        node.onmouseover=function() {
          this.className="over";
        }
      
        node.onmouseout=function() {
          this.className="";
        }
      
        node.onfocus=function() {
          this.className="over";
        }
      
        node.onblur=function() {
          this.className="";
        }

      }

    }

  }
};

</script>

</head>

<body onLoad="initNavPulldown()">

Popup Menu Example

Popup Menu HTML Code

<div class="nav-popup" >

<ul id="nav-pulldown" title="Pull Down Menu Example">
  <li><a href="http://www.rst.uiuc.edu/default.htm">Home</a>

  <ul class="subnav" title="Home">
    <li><a href="http://www.rst.uiuc.edu/default.htm">Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/mission.htm">Mission</a></li>
    <li><a href="http://www.rst.uiuc.edu/history.htm">History</a></li>
    <li><a href="http://www.rst.uiuc.edu/events.htm">Events</a></li>
    <li><a href="http://www.rst.uiuc.edu/faculty.htm">Faculty/staff</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/current.htm">Graduate Students</a></li>
  </ul>
   </li>

  <li><a href="http://www.rst.uiuc.edu/undergrad.htm">Undergraduate</a>
    
  <ul class="subnav" title="Undergradaute">
    <li><a href="http://www.rst.uiuc.edu/undergrad.htm">Program Overview</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/admission.htm">Admission</a></li>
    <li><a href="http://www.rst.uiuc.edu/http://courses.uiuc.edu/cis/catalog/urbana/2005/Spring/LEIS/index.html">Courses</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/advising.htm">Advising</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/internship.htm">Internship</a></li>
    <li><a href="http://www.rst.uiuc.edu/undergrad/links.htm">Links</a></li>
  </ul>
   </li>

  <li><a href="http://www.rst.uiuc.edu/grad.htm">Graduate</a>
    
  <ul class="subnav" title="Graduate">
    <li><a href="http://www.rst.uiuc.edu/grad.htm">Program Overview</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/admission.htm">Admission</a></li>
    <li><a href="http://courses.uiuc.edu/cis/catalog/urbana/2005/Spring/LEIS/index.html">Courses</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/ms.htm">Masters</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/phd.htm">Doctorate</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/current.htm">Current Students</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/aid.htm">Financial Aid</a></li>
    <li><a href="http://www.rst.uiuc.edu/grad/links.htm">Links</a></li>
  </ul>
   </li>

   <li><a href="http://www.rst.uiuc.edu/research.htm">Research and Extension</a>
    
  <ul class="subnav">
    <li><a href="http://www.rst.uiuc.edu/research.htm">Research Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/research/labs.htm">Research Labs</a></li>
    <li><a href="http://www.rst.uiuc.edu/research/extension.htm">Extension</a></li>
  </ul>

   <li><a href="http://www.rst.uiuc.edu/alumni.htm">Alumni</a>
    
  <ul class="subnav">
    <li><a href="http://www.rst.uiuc.edu/alumni.htm">Alumni Home</a></li>
    <li><a href="http://www.rst.uiuc.edu/alumni/advisory.htm">Alumni Advisory
      Board</a></li>
    <li><a href="http://www.rst.uiuc.edu/alumni/update.htm">Updates</a></li>
  </ul>
   </li>
<ul>

Popup Menu CSS Code

div.nav-popup {
  margin-top: 1em;
  margin-bottom: 1em;
  background: #333366;
  width: 16em;
}

ul#nav-popup {
  margin: 0;
  margin-left: .5em;
  margin-right: .5em;
  padding: 0;
  padding-top: .25em;
  padding-bottom: .25em;
  color: #FFFFFF;
  background: #333366;
  border: 1px solid #333366;
}

ul#nav-popup li {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}

ul#nav-popup a {
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: .125em;
  padding-bottom: .125em;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

ul#nav-popup li ul.subnav  {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 14.5em;
  display: none;
  font-size: 100%;
  text-align: left;
  border-top: 1px solid #333366;
}

ul#nav-popup li ul.subnav li a {
  margin: 0;
  padding: 0;
  display: block;
  padding-top: .125em;
  padding-bottom: .125em;
  font-size: 90%;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  width: 8em;
  border-left: 1px solid #333366;
  border-right: 1px solid #333366;
  border-bottom: 1px solid #333366;
}

ul#nav-popup li:hover ul.subnav, ul#nav-popup li:focus ul.subnav  {
  display: block;
}

ul#nav-popup li.over ul.subnav {
  display: block;
}

ul#nav-popup li.over a {
  color: #333366;
  background-color: #FFFFFF;
}

ul#nav-popup li a:link, ul#nav-popup li a:visited  {
  color: #BBBBBB;
  background-color: #333366;
}

ul#nav-popup li a:link.selected, div#nav-popup li a:visited.selected  {
  color: #FFFFFF;
  background-color: #333366;
}

ul#nav-popup li a:hover, div#nav-popup li a:focus {
  color: #FFFFFF;
  background-color: #333366;
}

ul#nav-popup li ul.subnav a:link, div#nav-popup li ul.subnav a:visited  {
  color: #333366;
  background-color: #FFFFFF;
}

ul#nav-popup li ul.subnav a:hover, ul#nav-popup li ul.subnav a:focus {
  color: #FFFFFF;
  background-color: #333366;
}

Pull Down CSS Javascript for IE Compatibility

Internet Explorer implements the :hover CSS psuedo-property only for links and form controls, while other browser like Mozilla/Firefox and Opera support :hover for any element. :hover behavior can be simulated in IE using Javascript to insert or remove a CSS class with the properties that make the pop-ups visible.

Note: Opera must be set to identify itself as Opera and not as Internet Explorer for the function to work properly in Opera.

<script type="text/javascript">

function initNavPopup() {

    if (document.all&&document.getElementById) {

    navRoot = document.getElementById('nav-popup');

    for (i=0; i<navRoot.childNodes.length; i++) {

      node = navRoot.childNodes[i];

      if (node.nodeName=="LI" || node.nodeName=="li") {

        node.onmouseover=function() {
          this.className="over";
        }
      
        node.onmouseout=function() {
          this.className="";
        }
      
        node.onfocus=function() {
          this.className="over";
        }
      
        node.onblur=function() {
          this.className="";
        }

      }

    }

  }
};

</script>

</head>

<body onLoad="initNavPopup()">