Digital Web Magazine

The web professional's online magazine of choice.

More usability frosting for your accessibility cake : Comments

By Aaron Gustafson

April 20, 2005



April 21, 2005 1:03 AM

Great Article, we have been toying with some ideas for a similar situation with a client… but they want to have 3+ levels instead of the 2 allowed by optgroup…

Jens Meiert

April 21, 2005 2:09 AM

Well, I just skimmed the article but something immediately came to my mind: In conjunction with “optgroup” elements, I claim the Mac implementation of the “select” element to be worst (!) to use, next your version (which technically is interesting, but only seems slightly better from a usability point of view), next the Windows version.

Of course, you need to test such assumptions, but in any event, there is strong evidence that users have problems with drop down menus – you cannot see all the options you have and it demands more motor efforts (that’s why I claim the Mac implementation to be worst).

Exceptions for this are rare, I fear – a drop down for year of birth selection might seem appropriate, but it’s maybe even better to use an input field instead.

Based loosely on Pulp Fiction: “We should have fuckin’ user tests.” ;)


April 21, 2005 3:19 AM

YUCK, I don’t like this at all. It’s not even close to the Mac way. It’s not even a cheap kock off, it’s shame really. I’d have just left it. Windows users are used to that sort of a select box, Mac users to theirs, throwing this at them might just make for more clicks and confusion. Also with a little trickery, atleast in Mozilla/FireFox you could make a Select box work exactly like the one on the mac, you’d have to have your JS rewite things but it really wouldn’t be all that hard, atleast for FireFox, I can’t imagine coding to work well with IE


April 21, 2005 5:27 AM

I think this is a nice solution (maybe better than the Mac one) but you could add an option to turn the js on or off (and maybe leaving it off by default), so that the user can choose which way of selecting input data to use.


April 21, 2005 5:58 AM

I am thinking there could be a nicer way to impliment this via some DHTML. Say you have the usual windows drop down as illustrated in the beginning. But on click, some menus appear a la DHTML navigation, allowing you to pretty it up as you see fit. User selects, and that adjusts the drop down accordingly. Also, this system would continue to work for those without JS on, as the old school menu would continue to fuction appropriately.

Actually, I think I might spend some time seeing if that would actually work.


April 21, 2005 6:19 AM

I think this is a nice example of how to make forms more usable when there are a large number of options in a selectbox — while still enabling non-js users to access all options — but I would hestitate to say that it makes the UI any more visually pleasing.

In response to Sean’s post, I have implemented a site where select boxes are replaced using DHTML. DOM browsers have their select boxes changed into nice slider bars, while older browsers and screen readers had the standard form elements. Screen shot here:

I was working on making a generic script for replacing form elements with DHTML a while ago, but as with many projects work and real life got in the way.

Mike Badgley

April 21, 2005 6:20 AM

The idea is a good one, but in reality all your introducing is more mouse-clicks (and possible confusion) for the user.

Aaron Gustafson

April 21, 2005 6:25 AM

I actually wrote this article some time last year and since then have been working on even better ways to implement <select>. I am starting a self-published series called “Select Something New” which offers a way to style <select>s via the DOM. Part 1 is the first step, part 2 will examine access/usability concerns (such as keyboard navigation, etc.), part 3 will explore the technique as it applies to <select>s with organizational <optgroup>s, and part 4 will examine this technique as it applies to <select>s which allow multiple selections. I have been approached about adding a part 5 to deal with combo boxes, which I think may merit some consideration.


April 21, 2005 7:57 AM

Great article! The concept looks solid…can’t wait to play around with it.

One quick question: I’m no JavaScript expert, so I may be totally off, but the following line confused me:

if (!document.getElementsByTagName && !document.getElementById)

It seems (to my possibly-confused mind) like that expression would evaluate to true only in the case where both functions are unavailable, but not if one or the other was unavailable. Wouldn’t you want to use || instead of &&?

Thanks in advance for the clarification, and for the article!

Chris Heilmann

April 22, 2005 5:22 AM

I had a similar idea, but discarded select boxes completely, as they do have usability/accessibility issues.

Instead I chose to use a nested list and make it sizzle with the DOM:

This is also in the ALA queue, but god knows when it will be out.



April 22, 2005 6:12 AM

Chris: the problem with your solution is that it can not be used to replace form elements that are required to POST data. A suitable solution needs to degrade in such a way that people with javascript disabled can still actually send data as part of the larger form.

Chris Heilmann

April 22, 2005 7:13 AM

Dan, that is true, of course. It is meant for a different purpose, but tackles the same UI issue.

Albert Banks

May 2, 2005 11:42 AM

I was initially very excited about this article until I tried it with a real world example. Using Country and State/Province as the menu items the ammount of data to be loaded into the lists caused excessive page load time. This example may work for small lists, but for larger ones I’ll have to use server-side scripts. Good luck to me!


September 23, 2005 1:26 PM

That is really cool! Thanks a lot Aaron. Now I can make an accessible Country/Province list!


October 6, 2005 8:23 AM

I have a question/problem.

I’m using your script wich works great! But there’s one problem, in IE(6) under WinXP my browser loads the page up to the . Then your script causes a page-refresh while splitting the .

I’m not able to fix this problem. My question is: Do you have an solution for this problem, and do you get this problem as well? (It is a complex XHTML/CSS page with more nice scripts)

Thanks in advance!


Sorry, comments are closed.

Media Temple

via Ad Packs