May 10, 2006

XUL Widgets: Textboxes, validation and accessibility

<xul:textbox/> visual examples

This is my initial attempt to give XUL controls a standard set of icons and styling to support new features in XUL Widgets. XUL Widgets will soon support several flavors of <xul:textbox/>:

  • disabled
  • delayed (for when the application wants a time-delay)
  • invalid (for when a control's value is not valid)
  • warning (for when a control is valid, but the application wants to caution the user)
  • internal-error (a bug internal to the application or widget)
  • OK status (everything checks out)

This is a first draft, and subject to change based on feedback. I asked a11y on news.m.o for some, and got all my replies from /dev/null...

You might be wondering: why would I try to create icons to go with textboxes? The answer is simple: color-blindness is a real and not-so-obvious problem.

I'm also wondering how I can display these icons for people who need the accessibility support, and not display them for those who don't.

I'll maintain current drafts of these icons with the XUL Widgets installables fairly soon. (I still have some <xbl:implementation/> code to write.)

A few observations:

  • The tooltips really don't work in Gecko 1.8. They seem to work nicely in Gecko trunk. (This is a problem until at least the Aviary 2.0 / SeaMonkey 1.1 releases. Help wanted.)
  • In the default Firefox (1.5) theme and in SeaMonkey's (1.0, trunk) Classic theme, I couldn't visually tell the difference between a normal textbox and a disabled one without the icon present. (XUL Widgets does a little extra to identically style the textbox itself in a disabled state, with other attributes in play.) The colors essentially matched. This is probably a legitimate a11y bug in the themes.

Comments welcome!

Posted by WeirdAl at May 10, 2006 5:08 PM
Comments

For the 3 main status (OK, warning, invalid) we could use a 'traffic light' arrangement - colour blind people know how to read that.
Using again road sign analogy, I'm not sure a square is the right format for 'invalid' - why not use an exclamation mark ! as it is used in many practical implementation of form checking.
For delayed status an hour-glass is more common (Windows waiting)
I'm not sure the 'internal error' status should be conveyed to the user but if it does a ? could be OK.

I hope you get more feedback and by merging them all you'll get a nice set :-)

Posted by: franCk at May 10, 2006 10:05 PM

Why not let all users enable the icons? Most people can figure out what red/yellow means, but I doubt many would know what a blue/pink colour signal is for.

(From Alex: Hence, the tooltips. :-) )

And for the disabled box, it might make sense to have it grey, or even use opacity tricks.

(From Alex: On disabled widgets, I intend to reuse Mozilla's native settings. Otherwise, I will be inviting disaster by confusion. That said, for any new widgets, I just want to emulate Mozilla's behavior as closely as possible.)

Posted by: ant at May 11, 2006 5:41 AM

What will these be used for? What is a "delayed" textbox?

(From Alex: Delayed means that the application wanted to let the user finish typing before it attempted validation. Internal-error and warning I don't know if I'm going to use.

But being able to state a control is invalid is pretty important.

I hope to use several of these in Verbosio, but they're general purpose extensions. Some ideas will work, some won't. For example, I'm already revising my approach to textboxes, as I found I couldn't exactly stick one of these images inside the input box. The colors were often too close.)

Posted by: Jesse Ruderman at May 11, 2006 4:16 PM