Re: canvas example

A question,did you run it on Firefox? Does it work OK?

On Thu, Oct 6, 2011 at 7:09 AM, Charles Pritchard <chuck@jumis.com> wrote:

> 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_transparency.htm>
> http://ie.microsoft.com/**testdrive/Graphics/hands-on-**
> css3/hands-on_text-shadow.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<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<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<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<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<public-canvas-api-request@w3.org>[mailto:
>> public-canvas-api-**request@w3.org <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 <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<public-canvas-api-request@w3.org>[mailto:
>> public-canvas-api-**request@w3.org <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<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
>>
>>
>>
>>
>
>


-- 
Paniz Alipour