Is it possible to develop an accessible dynamic menu?
AccessIT Article ID: 1204
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.
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:
- 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.
- 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.
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.
Last update or review: January 24, 2013