HTML and CSS Reference
In-Depth Information
HTML5 Canvas and Accessibility: Sub Dom
The current method for implementing accessibility for the Canvas is referred to as the “Fall-
back DOM Concept,” or “sub dom” (which involves adding text directly into the
<can-
vas></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)tosearchfortextandimagesandtheirpropertiesdrawnontotheCanvas.Tomakethe
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
<canvas id=
"canvasOne"
width=
"500"
height=
"300"
>
<div>
<div>
A yellow background with an image and text on top:
<ol>
<ol>
<li>
<li>
The text says "Hello World"
</li>
</li>
<li>
<li>
The image is of the planet earth.
</li>
</li>
</ol>
</div>
</ol>
</div>
</canvas>
</canvas>
We should also make an accessible title for the page. Instead of:
<title>
<title>
Ch1Ex6: Canvas Sub Dom Example
</title>
</title>
Let's change it to:
<title>
<title>
Chapter 1 Example 6 Canvas Sub Dom Example
</title>
</title>
To test this, you need to get a screen reader (or a screen reader emulator).
Fangs
is a screen
readeremulatoradd-onforFirefoxthatcanhelpyoudebugtheaccessibilityofyourwebpages
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:
