<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="https://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. Partially overlaying the circle is a green <a href="https://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> and a purple <a href="https://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()
- 在canvas上添加一个点击区域。
CanvasRenderingContext2D.removeHitRegion()
- 从canvas上移除指定id的点击区域。
CanvasRenderingContext2D.clearHitRegions()
- 移除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()
- 如果给定的元素获得了焦点,这个方法会沿着在当前的路径画个焦点圈。
另外,scrollPathIntoView()方法可以让一个元素获得焦点的时候在屏幕上可见(滚动到元素所在的区域)
。
CanvasRenderingContext2D.scrollPathIntoView()
- 把当前的路径或者一个给定的路径滚动到显示区域内。