Dropdown Menu Interesting Example #1

This is one of several dropdown menus tested on Terrill Thompson's Dropdown Menus Test Page.

Description

This page uses a menu that was discovered on the home page of a higher education institution. It's used here to make the point that dropdown menus are implemented using a wide variety of techniques, many of which are not accessible.

To exit the menu, press tab again and you should land safely in this paragraph.

Observations

• Funky with keyboard, though not as inaccessible as it might seem.
• The full menu system is accessible at all times for screen reader users—it's just a nested list.
• The submenus are hidden from sighted users because the height of the container div is too small to hold them. When users hover over a menu item, JQuery is used to change the height of the div. The problem is that as designed, this is a mouse-dependent behavior—it doesn't work for keyboard users.