Dropdown menus (a.k.a. flyout or DHTML menus) are not on my personal list of favourite features to use on a website. Many others seem to like them though, and that’s fine as long as such menus are implemented in an accessible way, which to a large extent means making them keyboard friendly.
Unfortunately, most dropdown menus I come across in the wild are not keyboard friendly. A couple of common examples:
- No real links: Sub-level links cannot be revealed without using a mouse, and top-level items are not linked to sub-pages. Not revealing the sub-menus for non-mouse users may be ok if the top-level items are actual links to pages that contain the sub-level links in a normal, visible sub-menu. That way the dropdown menus do not prevent people from navigating the site and can be seen as an enhancement for users who like them.
- Tabbing black hole: Sub-level links are not displayed on focus but exist in the tab order, which makes them technically accessible but also creates a "tabbing black hole" for non-mouse users. Since there is no visual feedback unless you use a mouse they are extremely difficult to use.
Next time you implement a dropdown menu, please make sure to avoid these problems.
Further reading on this subject:
- Martin Kliehm: Accessible Drop-Down Menus
- John Faulds: Dropdown low down
