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
Add a test case of accessible canvas example. Otherwise will have to close as insufficient information.
<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).
Please upload that as an HTML test case.
<rdar://problem/15504587>
Note that button is a null reference in your partial example, I assume you meant to use document.getElementById('button');
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; });