点击区域和无障碍访问

<canvas> 标签只是一个位图，它并不提供任何已经绘制在上面的对象的信息。canvas 的内容不能像语义化的 HTML 一样暴露给一些协助工具。一般来说，你应该避免在交互型的网站或者 App 上使用 canvas。接下来的内容能帮助你让 canvas 更加容易交互。

内容兼容

<canvas> ... </canvas>标签里的内容被可以对一些不支持 canvas 的浏览器提供兼容。这对残疾用户设备也很有用（比如屏幕阅读器），这样它们就可以读取并解释 DOM 里的子节点。在html5accessibility.com有个很好的例子来演示它如何运作。

<canvas>
  <h2>Shapes</h2>
  <p>A rectangle with a black border.
   In the background is a pink circle.
   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
   Partially overlaying the circle is a green
   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
   both of which are semi-opaque, so the full circle can be seen underneath.</p>
</canvas>

演示视频：video how NVDA reads this example by Steve Faulkner.

ARIA 规则

Accessible Rich Internet Applications (ARIA) 定义了让 Web 内容和 Web 应用更容易被有身体缺陷的人获取的办法。你可以用 ARIA 属性来描述 canvas 元素的行为和存在目的。详情见ARIA和 ARIA 技术。

<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>

点击区域（hit region）

判断鼠标坐标是否在 canvas 上一个特定区域里一直是个有待解决的问题。hit region API 让你可以在 canvas 上定义一个区域，这让无障碍工具获取 canvas 上的交互内容成为可能。它能让你更容易地进行点击检测并把事件转发到 DOM 元素去。这个 API 有以下三个方法（都是实验性特性，请先在浏览器兼容表上确认再使用）。

CanvasRenderingContext2D.addHitRegion() Experimental: 在 canvas 上添加一个点击区域。
CanvasRenderingContext2D.removeHitRegion() Experimental: 从 canvas 上移除指定 id 的点击区域。
CanvasRenderingContext2D.clearHitRegions() Experimental: 移除 canvas 上的所有点击区域。

你可以把一个点击区域添加到路径里并检测MouseEvent.region属性来测试你的鼠标有没有点击这个区域，例：

<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: "circle"});

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    alert("hit region: " + event.region);
  }
});
</script>

addHitRegion()方法也可以带一个control选项来指定把事件转发到哪个元素上（canvas里的元素）。

ctx.addHitRegion({control: element});

把这个特性用在<input>元素上会很有用。看看这个例子：codepen demo.

焦点圈

当用键盘控制时，焦点圈是一个能帮我们在页面上快速导航的标记。要在 canvas 上绘制焦点圈，可以使用drawFocusIfNeeded 属性。

CanvasRenderingContext2D.drawFocusIfNeeded() Experimental: 如果给定的元素获得了焦点，这个方法会沿着在当前的路径画个焦点圈。

另外，scrollPathIntoView()方法可以让一个元素获得焦点的时候在屏幕上可见(滚动到元素所在的区域)。

CanvasRenderingContext2D.scrollPathIntoView() Experimental: 把当前的路径或者一个给定的路径滚动到显示区域内。

点击区域和无障碍访问

内容兼容

ARIA 规则

点击区域（hit region）

焦点圈

相关内容