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

Creating Accessible Navigation Bars

Navigation bars and other groupings of links are important to represent in HTML markup so that users can easily identify the navigation bars and skip over or move to them. By providing a distinctive label with the title attribute for each grouping, users can also identify the purpose of each navigation bar.

HTML Markup

ul
Use ul as a container for navigation bars and other lists of related links
h2
The h2 element is used to provide a descriptive label for the collection of links. The h2 or other heading can be hidden in a graphical rendering using CSS positioning, for example:<h2 style="position: absolute; left: -200em; top:-20em;">menu title</code>.
ul.title
You may use the title attribute to provide a redundent a descriptive label for the collection of links and will provide a tooltip
li
Use li as a container for individual links in the navigation bar

Related Accessibility Requirements

Section 508
§ 1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
Web Content Accessibility Guidelines (WCAG 1.0)
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]

Vertical Menu Example Code

W3C Resources

Style Sheet Source Code

div.vmenu h2 {
   position: absolute;
   top: -20em;
   left: -200em;
}

div.vmenu {
   margin: 0;
   padding: 0;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 5em;
   padding: .25em;
   border: solid 2px #4d8cba;
   background: #aa8;
   width: 25%;
}

div.vmenu ul {
  list-style: none;
   margin: 0;
   padding: 0;
   padding: .25m;
}

div.vmenu ul li {
   margin: 0;
   padding: 0;
}

div.vmenu ul a {
   margin: 0;
   padding: 0;
   padding-left: .5em;
   padding-right: .5em;
   padding-top: .25em;
   padding-bottom: .25em;
   text-decoration: none;
   background: #eec;
   border: solid 2px #4d8cba;
   font-weight: bold;
   font-size: medium;
   display: block;
}

div.vmenu ul a:link, div.vmenu ul a:visited {


} div.vmenu ul a:hover, div.vmenu ul a:focus {
   background: #4d8cba;
   color: #ffffff;
   border: solid 2px #eec;
}

HTML Source Code

<div class="vmenu">

  <h2>W3C Resources </h2>

  <ul title="W3C Resources">
    <li><a >W3C Activities</a></li>
    <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
    <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
    <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
    <li><a href="http://www.w3.org/Consortium/" >About W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/join" >Join W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/contact" >Contact W3C</a></li>
  </ul>  

</div>

Horizontal Menu Example Code

W3C Resources

Style Sheet Source Code

div.hmenu h2 {
   position: absolute;
   top: -20em;
   left: -200em;
}

div.hmenu {
   margin: 0;
   padding: .25em;
   margin-top: 1em;
   margin-bottom: 1em;
   background: #eec;
   width: 100%;
   text-align: center;
}

div.hmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   padding: .5em;
}

div.hmenu ul li {
   margin: 0;
   padding: 0;
   display: inline;
}

div.hmenu ul a {
   margin: 0;
   padding: 0;
   padding-left: .5em;
   padding-right: .5em;
   text-decoration: none;
   background: #eec;
   border-left: solid 2px #4d8cba;
   font-weight: bold;
   font-size: medium;
}

div.hmenu ul a.first {
   border-left: none;
}

div.hmenu ul a:link, div.hmenu ul a:visited {
   color: #225;
}

div.hmenu ul a:hover, div.hmenu ul a:focus {
   color: #b70;
}

HTML Source Code

<div class="hmenu">

  <h2>W3C Resources </h2>

  <ul title="W3C Resources">
    <li><a >W3C Activities</a></li>
    <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
    <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
    <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
    <li><a href="http://www.w3.org/Consortium/" >About W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/join" >Join W3C</a></li>
    <li><a href="http://www.w3.org/Consortium/contact" >Contact W3C</a></li>
  </ul>  

</div>