Accessible DHTML: two different approaches

One of the new features in Firefox 1.5 is support for DHTML accessibility, something that is being developed at the W3C and is described in Dynamic Accessible Web Content Roadmap (currently a Working Draft). The goal is to provide a way of making websites that use widgets normally found in desktop applications accessible to keyboard users and assistive technologies. Examples of such widgets are sliders, tree views and menu bars.

Gez Lemon has created a keyboard accessible colour selection widget to demonstrate the new accessibility features in Firefox 1.5. Gez describes how the widget works in Firefox 1.5 Accessible Widgets.

A different approach is to use Web Forms 2, as Anne van Kesteren demonstrates in Color Picker. In this particular case that makes the script a lot simpler since there is no need to create the slider functionality - the browser takes care of that. Currently only Opera fully supports it. Safari creates the sliders but does not update the colour.

Two different approaches that both look promising.

Posted on December 7, 2005 in Accessibility, JavaScript, Quicklinks


  1. I’m a FF daily user and I haven’t done the upgrade yet…but I’ll do it this weekend following on from Gez’s article (he writes good stuff all the time doesn’t he?!!)

    I’m glad to see Mozilla (W3C and others) taking a good look at DHTML and it’s accessibility…I’m not saying DTHML will be the next ‘big thing’, but I have a soft spot for it - but I’m also aware that it could present accessibility issues on certain platforms which isn’t helping it’s status within the Web Standards arena. Making it more accessible is a step in the right direction as far as I’m concerned.

  2. I saw Annes post a few days ago and have to admit, that I like the webforms 2 solution. Of course, it’s only a simple non-styled demo, but the source code is much cleaner in my opinion and very easy to understand.

  3. December 8, 2005 by Joeri Dehouwer

    Safari does seem to update the colours perfectly here.

  4. Yeah, but c’mon: until IE gets support for any Web Forms stuff, it ain’t production-ready. What’s accessible about something that can only be used by 14-ish% of your browsing audience?

  5. December 8, 2005 by zcorpan

    Small Paul: If you read the comments on Anne’s post you would have found that Dean Edwards got it working in IE.

  6. Safari seems to work fairly well when the window is about 1000px wide. If you make it larger and you click on one slider the cursor gets completely offset to the slider.

    In Firefox 1.5 I get a different stylesheet than in Safari.


  7. December 8, 2005 by Roger Johansson (Author comment)

    Small Paul: Both examples are demonstrations of what will be possible once browser support is there. Until then I agree that neither is very accessible.

    Rob: Which of the two approaches are you referring to?

  8. I referred to the color picker.


Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.