Usability / Accessibility Issues With Dropdowns
There’s still some debate as to whether or not it’s OK to use dropdowns in usable, accessible web design. I’ll definitely say that there are some dropdowns that are really well put together and are both accessible and usable. For example the Suckerfish dropdown seems to do pretty well (while not perfect).
Today I was checking out Jiffy Lube’s site because I really…really need to get my oil changed. You can tell right away that the site is designed for an monitor with an 800×600 resolution. It’s about 760px wide. However when you click on their custom designed dropdown you’re missing out on a few options without any way of scrolling down. As soon as you move the mouse to the scroll bar, the dropdown goes away.
(one thing I do like is that the dropdown *is* keyboard accessible, so when you’re tabbing through the dropdown you can actually get to all of the options. Nice!)
JiffyLube.com
Now I’m a savvy web user with a hot mouse that has a scroll wheel, so I can get around it simply by staying on the dropdown and scrolling down with my wheel. That’s great for me, but it’s just not appropriate to think that most of your customers will be able to do that. Especially if a customer has problems with hand dexterity or any other disability leaving them unable to get to the rest of that dropdown.
How Do I Fix It?
Well, one thing is to always provide an alternate way of getting into any dropdown sub-item. ie, if you have a dropdown called “Products,” make the hyperlink for products actually go to a products page. Sounds simple enough.. However, that’s not always an option, in that case, take a look at Gmail. There’s a handy scrollbar in the dropdown itself to get into all of your labels (which works nice for people like me who have 20+ labels).
Something to think about!
