Canvas, CSS and ARIA with Form Elements

Supporting the native shadow dom with pure CSS:

Daniel Christopher recently sent me a link to a project [1] which 
demonstrates pure CSS enhancement of checkbox, radio and range, using 
the native component shadow dom [2] implemented in webkit.

WebKit has selectors: -webkit-slider-thumb for the native input 
type="range" controller:
input[type="range"]::-webkit-slider-thumb

With ARIA [3] and a scripted environment, you might do something like 
this, as a generic implementation:
<div role="slider"><div aria-grabbed="false"></div></div>

For legacy HTML forms and non-scripted/pure-css environments, and for 
accessibility, you will end up with something like this:
<div><label for="range">Range</label><input id="range" name="range" 
type="range" role="slider" aria-grabbed="false" /></div>

These shadow dom selectors, like slider-thumb, may be useful additions 
to a subsequent ARIA specification.


Supporting the canvas shadow dom via scripting:

With an appropriate WCAG 2.0 level met, the author is free to place
the legacy HTML div tree into the canvas shadow dom [4].

Canvas authors that are not using drawFocusRing are likely not meeting WCAG.

Authors that have not met WCAG may support the native shadow dom (webkit 
example) through
CSS background image and color modifiers, as well as the normal CSS box 
model.

All canvas authors should ensure that canvas shadow dom content is 
intelligible whether
or not canvas is active and available.

Authors are encouraged to be color sensitive when styling background and 
foreground colors;
when supporting background-image, background-color and color should be 
tested as well.

Using options to disable scripting, as well as options to enable high 
contrast mode
and zoom can help when testing color accessibility.

Microsoft IE9 F12 Developer Tools provides compatibility mode testing,
which allows testers to disable Canvas.

http://www.w3.org/TR/html5/the-canvas-element.html
"In non-interactive, static, visual media, if the canvas element has 
been previously painted on ... then the canvas element represents ... 
the current image and size. Otherwise, the element represents its 
fallback content instead."

Noscript for Firefox enables testers to easily toggle on-and-off 
scripting; but will "hide" the canvas shadow dom,
which is a bug. Because of this bug, supporting Noscript requires 
additional scripting.

Firefox and WebKit do not currently support delivering focus events to 
the canvas sub-tree and so the shadow dom
is typically placed as an adjacent node to the canvas. IE6 - IE8 can 
support Canvas through the object tag and plugins,
such as Flash and IECanvas. These legacy solutions may require a parent 
div, as the canvas element must be absolutely positioned.

Example:
<div style="position: relative"><canvas 
style="position:absolute"></canvas></div>



Testing accessibility of Canvas, CSS and ARIA form elements:

As of July 2011, WebKit and Firefox do have drawFocusRing support in 
their code development trees,
though they do support CSS Canvas semantics.

Canvas developers are encouraged to use IE9 F12 Developer Tools and a
Windows MSAA/UIAutomation introspection tool [5][6] to perform keyboard 
accessibility,
high contrast mode and fallback content testing.

A rugged implementation of a slider widget may look something like the 
following,
supporting interoperability through various levels of CSS and HTML.

<script>
window.onload = function() { /* scripted canvas */};
var focusChange = function() { /* handle slider */ };
</script>
<style>
.slider { /* generic css for contrast requirements */ }
input[type="range"]::-webkit-slider-thumb { /* native widget css */ }
</style>
<div style="position: relative">
<canvas style="position: absolute">
<div>
<label for="range">Range</label>
<input id="range" name="range" type="range" class="slider" role="slider" 
onclick="handleSlider(this, event)" onfocus="handleSlider(this, event)" 
aria-grabbed="false" />
</div>
</canvas>
</div>


References:

[1] umbrUI - CSS3 range slider, checkbox + radio button
http://lab.simurai.com/css/umbrui/

[2] What the Heck is Shadow DOM?
http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

[3] Accessible Rich Internet Applications (WAI-ARIA) 1.0
http://www.w3.org/TR/wai-aria/

[4] HTML5 Canvas Accessibility in Internet Explorer 9
http://www.paciellogroup.com/blog/2010/09/html5-canvas-accessibility-in-internet-explorer-9/

[5] aViewer beta – updated
http://www.paciellogroup.com/blog/2011/06/aviewer-beta-updated/

[6] Where did the accessibility tools go?
http://blogs.msdn.com/b/seealso/archive/2010/07/22/where-did-the-accessibility-tools-go.aspx

Received on Tuesday, 19 July 2011 00:12:33 UTC