<canvas>
element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.
The content inside the
<canvas> ... </canvas>
tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at
html5accessibility.com
demonstrates how this can be done:
<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 .
Accessible Rich Internet Applications ( ARIA ) defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See ARIA and ARIA techniques 了解更多信息。
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).
CanvasRenderingContext2D.addHitRegion()
Adds a hit region to the canvas.
CanvasRenderingContext2D.removeHitRegion()
id
from the canvas.
CanvasRenderingContext2D.clearHitRegions()
Removes all hit regions from the canvas.
You can add a hit region to your path and check for the
MouseEvent.region
property to test if your mouse is hitting your region, for example.
<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()
method also takes a
控制
option to route events to an element (that is a descendant of the canvas):
ctx.addHitRegion({control: element});
This can be useful for routing to
<input>
elements, for example. See also this
codepen demo
.
When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the
drawFocusIfNeeded
property can be used.
CanvasRenderingContext2D.drawFocusIfNeeded()
If a given element is focused, this method draws a focus ring around the current path.
此外，
scrollPathIntoView()
method can be used to make an element visible on the screen if focused, for example.
CanvasRenderingContext2D.scrollPathIntoView()
Scrolls the current path or a given path into the view.