HTML5 Canvas, 2nd Edition

HTML5 Canvas and Accessibility: Sub Dom

The current method for implementing accessibility for the Canvas is referred to as the “Fallback DOM Concept,” or “sub dom” (which involves adding text directly into the <canvas></canvas>).

It has been known for quite some time that the HTML5 Canvas, because it is an immediate mode bit-mapped area of the screen, does not lend itself to accessibility. There is no DOM or display list inherent in the Canvas to make it easy for accessibility devices (such as screen readers) to search for text and images and their properties drawn onto the Canvas. To make the Canvas accessible, a method known as “Fallback DOM Concept,” or sub dom, was devised. Using this method, developers create a DOM element to match each element on the Canvas and put it in the sub dom.

In the first Canvas “Hello World!” example we created (CH1EX3.html), the text “Hello World!” appeared above an image of the earth (see Figure 1-3). To create a sub dom for that example, we might do something like this:

<canvas id="canvasOne" width="500" height="300">
 <div>A yellow background with an image and text on top:
     <ol>
        <li>The text says "Hello World"</li>
        <li>The image is of the planet earth.</li>
        </ol>
   </div>
</canvas>

We should also make an accessible title for the page. Instead of:

<title>Ch1Ex6: Canvas Sub Dom Example </title>

Let’s change it to:

<title>Chapter 1 Example 6 Canvas Sub Dom Example </title>

To test this, you need to get a screen reader (or a screen reader emulator). Fangs is a screen reader emulator add-on for Firefox that can help you debug the accessibility of your web pages by listing out in text what a screen reader might say when your page is read. After you install the add-on, you can right-click on the web page and choose the “View Fangs” option to see what a screen reader would see on your page.

For the Canvas page we just created, Fangs tells us that the page would read as follows:

“Chapter one Example six Canvas Sub Dom Example dash Internet Explorer A yellow background with an image and text on top List of two items one The text says quote Hello World quote two The image is of the planet earth.List end”

For Google Chrome, you can get the Google Chrome extension Chrome Vox, which will attempt to verbally read all the content on your pages.

(For the full example, see CH1EX6.html in the code distribution.)