HTML and CSS Reference
In-Depth Information
Accessibility within the canvas element
One reason that canvas is so fast on today's optimised JIT
JavaScript interpreters is that it keeps no DOM: it really is just
a big bunch of pixels, with no information stored about which
geometric shapes, text, or images have been thrown at them
(compare this to SVG, which does maintain all those as separate
objects in a DOM structure). So, for example, if you need any
kind of collision detection, you need to do all the bookkeeping
yourself. There is no representation of what objects have been
drawn that JavaScript can interrogate.
This also causes difficulty for accessibility. If your games are
keyboard- and mouse-accessible, that goes a long way to meet-
ing the needs of many. But for users with visual impairments,
there is nothing for assistive technology to hook into. Canvas
text is the same: bringing text into canvas means it ceases to
be text and is just pixels. It's even worse than <img> because at
least that can take alt text. Although the contents of the element
(the text between the canvas tags) can be changed with script
to reflect the canvas text you're inserting with JavaScript, I'm not
optimistic that developers will do this.
An accessibility task force of the Working Group is looking at
ways to enhance the accessibility of canvas. It's not impossible:
Flash 5 managed to add accessibility features. However, I rec-
ommend that, for the time being, canvas not be used for user
interfaces or as the only way to communicate information. Fila-
ment Group's jQuery Visualize plugin is a good example of can-
vas being used to supplement accessible information (see Note).
NoTE JIT means Just in
Time compilation, a tech-
nique used to improve the run-
time performance of a program.
NoTE Filament Group's
jQuery Visualize plugin
uses jQuery to inject a canvas
element to a page that graphs
the information from a data table
in the markup. Assistive technol-
ogies have access to the raw
data table, while the information
is supplemented with visual
graphs for sighted users.
The canvas API finally gives developers the ability to dynami-
cally generate and manipulate graphics client-side, directly in
the browser, without the need for plugin-based detours via Flash
and Co. The canvas is especially powerful for pixel-level process-
ing, and I can imagine that canvas-based applications will be push-
ing the boundaries of what we've historically seen on the Web.
However, you should be careful to choose the right technology
for the job. Consider SVG before ploughing ahead with your
next Awesome 3.0 app. And watch out for the possible acces-
sibility implications.
Search WWH ::

Custom Search