Monday, August 18, 2008

Accessible Multi Select Widget

While using plone.z3cform (a plone wrapper for z3c.form lib) I felt a bit frustrated when I could not find a multi select widget that were functional for a non javascript browser.

Yes, I know what you may want to say, that in the current century we web developers should not worry any more for non javascript browsers, but I think we do have to.

According to this stats (w3schools, and the counter) is about 5% of the users, and although this number is decreasing, I think that is still a considerably portion.

So, what I did is a widget that consist of a set of 3 html select fields. The actual
one (the one with the name that the form action will use) is the one that is viewed by default in a non javascript browser, and is something like in the first screen shoot.

If you have javascript enabled, the widget append a function to the onload event of the window, and then the default basic view is hidden, and shown a nicer one instead, like the one in the second shot. And each time the user do things on the nicer widget, that selection/de-selection action is reflected in the actual hidden select input.

Where is the code of the widget? So far, is inside my product, but if anyone thinks may be useful we can incorporate it on a more generic package.

On this same aspect, I would like to do similar kind of things with other widgets, and I open to hear suggestions.

No comments: