Robert Spangler

UI/UX designer & front-end developer

Navigation

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.

JiffyLube.com Dropdown
(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).

Gmail's Label Dropdown

Something to think about!

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

About Robert

I work with clients ranging from local small businesses and non-profits to large Fortune 500 companies.

If you think I'm the right guy for your project, please feel free to give me a shout.

I am a full-time freelance website designer and front-end developer from Baltimore, Maryland, currently living in Nairobi, Kenya.

I design and code for user experience on the web with special attention on mobile devices. I come from a background in eCommerce and lead generation, which I'm very good at. I spend most of my time personalizing and creating customized WordPress themes for clients. Other than designing websites I spend time with family, study, occasionally tweet, and rarely +.