If you must use a dropdown menu, make sure it’s keyboard friendly

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:

This post is a Quick Tip. Background info is available in Quick Tips for web developers and web designers.

Posted on December 21, 2009 in Accessibility, Usability

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.