AX: Support HTML5 Canvas AX with hit regions

• Component: Accessibility
• Status: RESOLVED INVALID

[Charles Pritchard]

Currently, mobile safari treats Canvas as an untitled image. Activating pointer events on the element is difficult.

Related issue/patch for keyboard events:
https://bugs.webkit.org/show_bug.cgi?id=50126

[James Craig]

Add a test case of accessible canvas example. Otherwise will have to close as insufficient information.

[Charles Pritchard]

<canvas role="button" aria-describedby="button" onclick="button.onclick()">
<button id="button">I am a button</button>
</canvas>

Mobile Safari should support the new addHitRegion semantics:
http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-addhitregion

<canvas id="canvas" role="application">
<button id="button">I am a button</button>
</canvas>

var ctx = canvas.getContext('2d');
ctx.rect(0,0,100,100);
ctx.addHitRegion({control: button});



Those two items should both work in VoiceOver with Mobile Safari to allow a user to drag their finger over the rectangle with VoiceOver reporting that the area is a button. In the latter case, only the first 100x100 pixels (the rect).

[James Craig]

Please upload that as an HTML test case.

[James Craig]

<rdar://problem/15504587>

[James Craig]

Note that button is a null reference in your partial example, I assume you meant to use document.getElementById('button');

[Charles Pritchard]

Chrome (Blink):
https://code.google.com/p/chromium/issues/detail?id=328961
Code review/patch (Blink):
https://codereview.chromium.org/287163007/

Firefox (Gecko):
https://bugzilla.mozilla.org/show_bug.cgi?id=966591
https://bugzilla.mozilla.org/show_bug.cgi?id=979692


Please note the following code sample may be outdated. Will check back in a few weeks to see if Blink and Gecko have converged and have an example using a DOM element.


Code sample (from Firefox):

<canvas id="input"></canvas>

var ctx = input.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 100, 75);
ctx.fill();
ctx.addHitRegion({id: "a"});


var regionId = "";
input.addEventListener('mousedown', function(evt){
 regionId = evt.region;
});

[James Craig]

Please upload that as an HTML test case.