Re: canvas example

tl;dr: I would add <input> and <label> elements. The two links are well 
authored, but unexpectedly, are missing
simple ARIA attributes and semantic HTML.

The process of making an accessible color picker for authoring decisions 
is quite involved; but that's a different issue
than simply reporting the content expressed by the UI widgets displayed 
in the demonstrations:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transparency.htm
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_text-shadow.htm

... page break.


Frank,

Addressing accessibility of input type "color" is a complex task.

I'm not satisfied with simply reporting that an RGB or HSL component has 
a particular value.

... section break.

In reference to:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transparency.htm

I'd probably use input type = range, aria role of slider, some described 
by or
labelled by semantics, and a means to "disable" border and other 
optional settings.

The increase and decrease links on the border settings do not have any 
ARIA markup,
though they're otherwise prepared for it.


My friend does quite a bit of work in color theory, and I'd spend some 
time consulting with him
before submitting a full report on accessibility of input type color.

We're both fans of using multiple range components for visualization; we 
used HSL and RGB in our early work (2007):
http://mugtug.com/sketchpad/

Michael Deal has been working on a color-oriented website for the past 
few months:
http://colrd.com/create/color/

He has not yet gone through an accessibility review -- he's missing 
various label attributes -- but
you can certainly see that he's picked up on using the <input> tag.

... section break.

In reference to:
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_text-shadow.htm

This, like the other example, is a piece of software that falls under 
both WCAG 2.0 and ATAG.
This is an authoring tool.

ARIA is, strangely, missing from this tool. That said, it looks like the 
tool was designed well
and should have ARIA semantics added, immediately.

I would add a component reporting on the contrast ratio of both the 
shadow and the
main text, in comparison to the background color.

The two examples, text on shadow and transparency, together, show the 
dynamic nature of an input type "color" control.
The control modifies three range values -- four, when opacity is taken 
into account.

Those controls can be made compact into a single control, using x and y 
coordinates to shift hue and saturation,
and a third component for luminance. Any component that works with 
multiple dimensions is something I'd describe as a complex component.

Any component which by necessity is mentioned as a special case in WCAG, 
deserves special attention. Color certainly falls under
that category, as it is mentioned in 1.3 Sensory characteristics and 1.4 
Distinguishable guideline -- use of color.


As an application author, I would add sufficient calculations, data 
sources, and semantics, to describe color in a manner
that is useful to any user who is working with an eyes-free user interface.

These calculations include contrast ratio, comparable palettes and other 
distance calculations.

... section break.

Input type color is a difficult widget to work with. It's quite complex, 
it has not been implemented by browser vendors
and existing implementations by software vendors on the desktop are 
most-often targeted solely to sighted developers.

That said, color is simply a complex component, involving several 
ranges, usually, three dimensions. Expressing three dimensions,
expressing cultural attitudes, and expressing distance, is something 
that can certainly be accomplished through semantic expression.

Whether non-verbal or exclusively verbal, color demonstrations can be 
translated in a manner that enables alternate views on the underlying 
data structures.

A visually impaired user may find that the use of patterns can help them 
distinguish readability, with various heuristic warnings about cultural 
or other
expectancy violations. A user accessing the widget from an eyes-free UI 
will certainly find that additional calculations on the underlying 
3-dimensional data
can help them make decisions or better understand the data being 
represented.



On 10/4/2011 2:26 PM, Frank Olivier wrote:
> Please see...
> http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_transparency.htm (Color pickers)
> http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_text-shadow.htm ('Shadow color')
> ...for HTML5 examples of a developer creating new controls with canvas.
>
> I'd be interested to know what you would add to the a11y DOM inside the canvas element to represent the same content - any feedback on that?
>
> Thanks
> Frank
>
> -----Original Message-----
> From: public-canvas-api-request@w3.org [mailto:public-canvas-api-request@w3.org] On Behalf Of Frank Olivier
> Sent: Monday, October 03, 2011 7:45 PM
> To: Richard Schwerdtfeger; Cynthia Shelly
> Cc: public-canvas-api@w3.org; public-html-a11y@w3.org
> Subject: RE: canvas example
>
> This is an odd example, IMO - http://canui.sourceforge.net/canui/canui.js is a huge amount of code that:
>
> Textbox, Tooltip, Buttons, Combobox, Image, Label, Link - recreates built-in (input) elements.
> List, Menu, Progress, Dialog - is easily done with divs; there are multiple libraries that do this already.
>
> The example controls won't work well on mobile devices. They add no new functionality to the existing set of input elements / libraries.
>
> I can see developers using canvas where they get new functionality not possible today. I don't think any serious web developer will spend time / add risk to their project to get (16 year old!) Windows 95 styling. If there really is a developer/company with a need for Win95 styling in their UI, they are much better off making a regular web page with regular<input>  elements, and then buying Windows 7 and configuring it to use the 'Windows Classic' theme. :)
>
> Thanks
> Frank
>
>
> From: public-canvas-api-request@w3.org [mailto:public-canvas-api-request@w3.org] On Behalf Of Richard Schwerdtfeger
> Sent: Monday, October 03, 2011 6:35 AM
> To: Cynthia Shelly
> Cc: public-canvas-api@w3.org; public-html-a11y@w3.org
> Subject: canvas example
>
> Cynthia,
>
> You had asked me for more examples of how canvas was used for application development. Here is something from source forge. Looks like Windows 95.
>
> http://canui.sourceforge.net/examples/index.html
>
> There will be more like this to come. Pandora's box is open.
>
> Rich
>
>
> Rich Schwerdtfeger
> CTO Accessibility Software Group
>
>
>

Received on Thursday, 6 October 2011 03:39:51 UTC