Re: another example of HTMl 5 canvas with interactive UI elements.

Steven Faulkner wrote:
> http://tools.mozilla.com/
>
> non mouse users get a link to a html version
>   http://tools.mozilla.com/simple.html
>
> Reminds me of alternatives offered to flash content.
>
> We have the opportunity to work out how to allow developers to provide an
> accessible canvas based UI controls, before users with disabilities are
> ghettoised by the inherent inaccessibility of canvas as currently specced.

One relatively simple way to make that particular example accessible 
would be to make use of an image map.  The technique could work 
something like this.

Overlay the canvas with a stretched transparent image of the same size 
has the canvas.  The image then needs to be associated with an image map.

For each icon represented on the canvas, an associated <area> element 
needs to be created by the script with its co-ordinates set to the 
position of the corresponding icon.  Appropriate alternate text is also 
needed for each one.  When icons on the canvas are moved, the image map 
areas need to be dynamically updated also.  With each area being 
focussable, this would add support for keyboard navigation.

The image and each area element would listen for and respond to events, 
such as mouse movement, clicking, and keyboard events. These events then 
trigger the appropriate animation or reorganisation of the icons.

When a blurb is shown after clicking on an icon, focus would need to be 
given to it so that screen readers would be made aware of and read their 
content.

I may have missed some things, as I only took a brief look at the 
system.  But it seems that, at least in this case, it's possible to get 
creative with existing features to provide an interactive and accessible 
mechanism, rather than relying on a separate alternative.  Although, in 
this case, providing the alternative as a plain table as well is useful 
for many users who would prefer not to use the canvas based approach. 
But it would help to have the table divided into the same categories as 
are available in the interactive canvas version.

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/

Received on Thursday, 9 July 2009 20:58:04 UTC