HTML5 Canvas and the Canvas Shadow DOM
The canvas shadow DOM enables you to provide code behind a canvas element for better user interaction and accessibility.
What is the Canvas Shadow DOM?
HTML5 Canvas provides a rich drawing surface that can be used for graphics, images, and even video display that can be manipulated with a collection of properties and methods. However, canvas is a strictly visual medium, which makes it difficult for screen readers and assistive technology to understand, without a little help.
The canvas shadow DOM is a sub version of the Document Object Model (DOM) in Windows Internet Explorer that offers a way to create an alternate interactive experience for assistive technology, as well as for browsers that don’t support Canvas. When you use the canvas tag, it is common to put some fallback code between the two canvas tags for browsers that lack canvas support. For example:
<html> <head> <title>Canvas not supported example</title> </head> <body> <canvas id="coolstuff" height="400" width="500" > HTML5 canvas support is required for a fully interactive experience, so here’s this: <br/> <img src=”staticimage.png” alt="some cool stuff"/> </canvas> </body> </html>
Fallback content - is it there, or not?
The fallback content, in this case a message and image, are normally hidden if canvas is supported in the browser. However, the content is still alive and well, and can be read and interacted with by assistive technology devices, such as screen readers.
Unlike a distant cousin, the alt attribute, the code between the <canvas> </canvas> tags is its own sub-DOM tree for to assistive technology. In its simplest form, you can add text to replace the graphic. The text can include HTML structure, such as lists and tables, which are not available with the alt attribute. The next example puts an ordered list behind a canvas.
<html> <head> <title>Canvas fall back example</title> </head> <body> <canvas id="coolstuff" height="400" width="500"> <div>The image here shows the future highway that will be: <ol> <li>Connecting the east side of the mountain to the west side</li> <li>Providing four wide lanes for traffic</li> <li>Adding a bike lane</li> </ol> </div> </canvas> </body> </html>
In this example when canvas isn’t supported it shows a table that is driven by the same data that drives the canvas fan control. In a screen reader, even if canvas is supported, the table can be read. To test this yourself, open F12 developer tools, and change the Document Mode to something other than Windows Internet Explorer 9 or Internet Explorer 10.
A browser that supports canvas will see this graphic:
A browser that doesn't support canvas, or a screen reader will "see" this:
Canvas Shadow DOM isn't just for accessibility
The canvas shadow DOM can also provide better interactivity. For example, if you render a stock chart from data in a table contained in the canvas DOM, you can use the keyboard to make updates. Using forms and fields, such as radio buttons, your interaction from the keyboard can be reflected back through the canvas graphic for sighted users with supported browsers, and the form and buttons otherwise.
Canvas graphics and the canvas shadow DOM are good for single controls, and can provide a great experience for the user and developer alike. However, the app can only get focus and a bounding rectangle for the whole canvas, not sections of it. This means that keyboard focus goes to a point at canvas coordinates 0,0. This will affect anything that depends on the focus, like screen magnifiers. If your app requires more complex interactive graphic experiences, you might want to look at SVG and ARIA markup for accessibility.