Webstandards, Accessibility and Usability at Penn State

Definition

A floating menu is one that appears when you roll your mouse over a target area. Floating menus may be found on http://www.psu.edu, http://www.missamerica.org and other Web sites.

Synopsis

• If your Web site includes a Javascript drop-down men or a DHTML "floating" menu, then make sure a text based menu is also included in the Web site. The menu can be at the bottom, but a visible link to a text based menu should appear at the top of a page.

SECTION 508 - 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.

Potential Accessibility Issues

Although innovative, floating menus feature the following accessibility issues.

1. Incorrectly coded menus may not work on screen readers

   .

2. Users with mobility impairment may find it difficult to move the mouse and click on the correct option. The more submenus, the more difficult the problem.

3. If only part of the hierarchy is visible at any one time, users with memory or cognitive disabilities may have difficulty locating which menu to click on.

Recommendations

• A link to a text-based menu or Site Map at the top of the page allows users unable or uncomfortable using a floating menu to use a more static set of navigational links.

  SECTION 508 - 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.

• According to a usability study by Jakob Nielsen, the most effective drop down menus show all options available.

• CSS and JavaScript can be used to hide sub menu options by default, but still make them available on a screen reader. However you must ensure that events can recognize keyboard tabbing as well as a mouse click.

• Ensure that menus can be accessed through tabbing on a keyboard

Links

• Jakob Nielsen: Mega Drop-Down Navigation Menus Work Well
• A List Apart Horizontal Dropdowns with CSS

Top of Page