Anne van Kesteren

Color Picker

Gez “access” Lemon just posted something about accessible widgets in the new Firefox. Personally I’m not that convinced that this multi-namespace (not backwards compatible with text/html) thing is the way forward. From a technical point of view it is of course very cool that you can do such things, but from an authoring perspective it is pretty awkward. Besides that, you also need this huge script to take care of everything. Not a pretty sight. Talking about the accessible color slider here.

(Extending tabindex to apply to all elements is something I fully support by the way. Importing the role attribute from XHTML2 is something I like a lot less. Especially considering that XHTML2 is not yet final and all that.)

Anyway, when I first saw the widget I knew it could be done a lot simpler using <input type="range"> from Web Forms 2. So here is my color picker. It works really nice in the new Opera preview and is usable to some extend in Firefox as well. (Perhaps I should replace the range control with some canvas goodness for Firefox...) Anybody with tips for Internet Explorer? (window.onchange does not do the trick.)

Comments

  1. In case anyone wonders, Internet Explorer was the first to extend tabindex in such a way that it was applicable to all elements. See the new tabindex. That extension also works in text/html.

    Posted by Anne at

  2. Hi Anne,

    LOL @ Gez "access" Lemon - I clearly need to discuss a more diverse range of topics :-)

    The multi-namespace isn't intended to be the way forwards. It's a suggestion from WAI's protocols and formats working group to bridge the gap with today's technology. The WAI roadmap suggests XML events, XForms, XHTML 2, and declarative markup to be the way forwards.

    Nice example of Web Forms 2, by the way.

    Posted by Gez at

  3. Maybe I missed something, but if you're against multi-namespace in general and you're so vehemently against XHTML, why are you on the CDF WG? Sabotage? ;)

    Posted by Jeff Schiller at

  4. Jeff, I like it. It just sucks from an authoring perspective. It has a number of other issues too, which we will hopefully solve in the CDF WG eventually. (Currently we are not doing not much related to multi-namespace documents though. Mostly busy with CDR and WICD.)

    Posted by Anne at

  5. Here's your colour picker demo working on Internet Explorer:

    http://dean.edwards.name/my/wf2/demos/color-picker.html

    It uses the Web Forms 2.0 shim that I’m currently working on. I had to use oninput as there is still a bug firing change events for sliders.

    Posted by Dean Edwards at

  6. The original is completely accessible by just typing the hex into the input. I find that making keys do my own bidding instead of the defaults is evil, as I feel the urge to crush something everytime I press alt-s and it doesn't open Sage, but goes to the bloody searchbar of that page.

    I do realise there does need to be a way to use keyboard commands in webapps, but mimetype sillyness should prevent it from being backwards compatible...

    Posted by James / AkaXakA at

  7. I was first ;-) http://owl.pp.ru/~kildor/Opera/sidebar.xml
    My color sidebar, with webForms2 and canvas… $)

    But it work only in O9, and nowhere else…

    Posted by Kildor at

  8. Very cool, but it would have helped if I were able to type in hex instead of decimal, I wondered why it wasn't working at first in Firefox until I look at the source. For that, you could use the Color() script I wrote a few weeks ago, it supports decimal, hex and percentages, plus it has some other cool features too.

    Posted by Lachlan Hunt at

  9. Kildor, you should fix namespaces. The only reason it works in Opera is because of some implied namespace bug in XHTML documents.

    Posted by Anne at

  10. Kildor, add xmlns="http://www.w3.org/1999/xhtml" to your head element. :-S Anne: he means html start tag.

    Posted by minghong at

  11. Anne, minghong, thanks for corrections… ;-)

    I have fixed it now…

    Kildor, add xmlns="http://www.w3.org/1999/xhtml" to your head element. :-S

    Why head? html is a root element…

    Posted by Kildor at