Best Practices for Menu Design

Click on a link to learn more about the WCAG 2.0 AA Standards for that topic.

 

General Best Practices

 

HTML Best Practices

 

CSS Best Practices

 

 

Common Menu Design Errors
View Error #1

Error #1: Use of links that go nowhere in dynamic menus

In this example, the dropdown menu is exposed when the user hovers over the link with their mouse, but keyboard users cannot access the drop-down menu, so the link is completely useless and all of the link destinations in the menu are inaccessible to them:

HTML

<ul>
<li><a href="#">Accessible Web Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Libraries ▾</a>
<ul class="dropdown">
<li><a href="#">Dewey Library</a></li>
<li><a href="#">Science Library</a></li>
<li><a href="#">University Library</a></li>
</ul>

CSS

ul#demo-dropdown {
padding: 0;
list-style: none;
background: #f2f2f2;
}

ul#demo-dropdown li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}

ul#demo-dropdown li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}

ul#demo-dropdown li a:hover{
color: #fff;
background: #939393;
}

ul#demo-dropdown li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}

ul#demo-dropdown li:hover ul.dropdown{
display: block; /* Display the dropdown */
}

ul#demo-dropdown li ul.dropdown li{
display: block;

 

View Error #2

Error #2: Using only pointing-device-specific event handlers for a function

In this example, the menu responds only to a mouse click, so the keyboard cannot be used to activate the same effect:

View Error #3

Error #3: Using script to make div or span a user interface control in HTML without providing a role for the control

In this example, a checkbox is created using a span and an image, and there is no information that identifies it as a checkbox:

 

 Include Signature

 

HTML

<table>
<tr>
<th>Student Status</th>
<th>Empire Commons</th>
<th>Dutch Quad</th>
<th>Indian Quad</th>
<th>State Quad</th>
<th>Freedom Apartments</th>
</tr>
<tr>
<th>Freshman</th>
<td>Blue</td>
<td>Purple</td>
<td>Yellow</td>
<td>Orange</td>
<td>Red</td>
</tr>
<tr>
<th>Sophomore</th>
<td>Purple</td>
<td>Red</td>
<td>Blue</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>

View Error #4

Error #4: Presenting navigation links in a different relative order on different pages

Looking at the two lists below, the slight discrepancy in the order of the links may cause confusion if everything else about the menu box remains the same from page to page: