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 ...