Skip to Main Content

Is it possible to develop an accessible dynamic menu?

Printable Version

There is a growing trend on websites in education and elsewhere toward providing a navigational system that includes dynamic menus, menus that expand as users point to them with the mouse. Proponents of dynamic menus argue that they reduce page clutter and provide a familiar, organized interface to a website, comparable to that of most software applications. The usability and efficacy of dynamic menus is the subject of much debate among developers, as seen in this online discussion on Usability and Fly-out Menus.

One problem with dynamic menus is that they often are inaccessible to a variety of users. Typically, a secondary menu appears when a user hovers over a primary menu item with a mouse, and it disappears when the user moves the mouse away. A typical menu responds only to mouse users and is not accessible to users who are navigating by keyboard with tab and arrow keys or who are using handheld computers and operating links and controls by tapping the screen with a stylus. These same menus usually are not accessible to screen reader users, and often they require that users' technologies support Javascript®, which many do not. (Many older browsers, pocket versions of browsers, and assistive technologies do not support Javascript, and many users and organizations now disable Javascript in their browsers because of security concerns).

A few individuals have taken on the problem of inaccessible dynamic menus by developing World Wide Web Consortium (W3C®) standards-based menu systems and documenting their development efforts. Examples include Nick Rigby's Drop-Down Menus, Horizontal Style, Patrick Griffiths's and Dan Webb's Suckerfish Dropdowns and Son of Suckerfish Dropdowns, and Yet Another Dynamic Menu (YADM). Each of these efforts follows these basic steps:

  1. Dynamic menus are marked up as nested unordered lists with Hypertext Markup Language (HTML). All formatting, including selective hiding of secondary menus, is done with Cascading Style Sheets (CSS). If CSS is not supported or enabled, the entire menu is displayed as a nested list.
  2. With CSS, secondary menus are initially hidden. This is sometimes done with CSS properties visibility:hidden or display:none. However, some screen readers hide content from blind users if it's marked up with these properties. Another approach is to position the secondary menu offscreen initially (e.g., with left:999em) so it is technically not invisible but only screen reader users can "see" it.
  3. When a user hovers over a primary menu with a mouse (or tabs to it using the keyboard), this changes the CSS properties of the corresponding secondary menu so that it becomes visible. Typically, this requires one or more Javascript functions, which means it will only work for users with Javascript. Further experimental efforts have tried to create this same effect with pure CSS (no Javascript), but because of current browser implementation of CSS, the best designs work only for mouse users (not keyboard users) and do not work in Internet Explorer®. For examples, see Eric Meyer's Pure CSS Menus and Stuart Robertson's Pure CSS Pulldown Menus.

Web development company Brothercake's efforts led to a commercial product, Ultimate Drop Down Menu (UDM), which is free to educational entities. UDM creates highly customizable menus that can be inserted anywhere on a page. They include extensive support for keyboard navigation and are readable by screen reader users. The documentation is extensive, and users must be fairly proficient with CSS if they intend to customize the appearance of their menus.

Even if developers create dynamic menu systems with these promising practices as models, the result will be a menu system that is not accessible to users without Javascript or to users of handheld computers, for whom there is no stylus equivalent to hovering with a mouse or tabbing to a primary menu item by keyboard. Therefore, the only way to ensure that all users have access to secondary menus is to populate the primary menu items with links that lead users to a separate page where they can access the secondary menu items. In order for this approach to provide an equivalent alternative to dynamic menus, the secondary menu items should be quickly and easily accessible, not buried within the context of an otherwise extensive page.

See also How do scripting languages affect accessibility?