Terry Thompson
Technology Specialist
AccessIT, University of Washington tft@u.washington.edu
How Dynamic Menus Work: Overview
A primary menu is displayed on the screen, while submenus are hidden.
A user points to a primary menu item. This triggers
a change in the corresponding submenu, making it visible.
The user points away from the visible submenu, which again triggers a
change, this time returning the submenu to its original invisible state.
Menu Systems: Accessibility Considerations
Can menus be navigated by keyboard?
Are hidden menu items communicated to screen reader users?
Are menus resizable?
Can users access menus without CSS ?
Can users access menus without Javascript?
Can users access menus with a stylus? (ANSWER: NO)
How Dynamic Menus Work: Detail
Create menu system using HTML nested unordered lists
Hide submenus by positioning them offscreen using CSS
Javascript approach:
Add a Javascript function that makes submenus visible by changing their
CSS positioning (i.e., move menu to an on-screen possition)
Also add Javascript functionality that returns menus to their invisible
off-screen position
Call Javascript function for displaying menu using onmouseover and onfocus
Call Javascript function for hiding menu using onmouseout and onblur
Pure CSS approach:
Use CSS pseudoclasses :hover and :focus to display and hide submenus
Internet Explorer does not support :hover on any elements other than
links
No browsers support :focus
#1 Rule of Menu Accessibility
Always populate root-level visible menus with links to pages where submenu
content can quickly be accessed by users who can't otherwise access the dynamic
content.
