canvas element provides a two-dimensional drawing surface, which introduces the same
accessibility issues as occur with images. That the element can be
used for static and dynamic images makes it similar in nature to SVG, and further complicates access.
When using the element to draw static two-dimensional images, consider wrapping the element as a
figure and embedding a description in the
If the element is used to draw bar graphs, pie charts and similar data representations, also consider making that data available in a more accessible form (e.g., as a table).
The HTML specification requires that equivalent fallback content be provided when using the
canvas element. Although this content can be embedded in the
element itself, doing so may interfere with other accessibility requirements (e.g., a description
should not be included in the
canvas if the
canvas element already contains
shadow DOM elements for scripting).
Before scripting content, consider the impact it will have on the user experience. If the information that you draw is critical to the comprehension of the book, ensure that scripting the element is only an enhancement of that information (i.e., do not lock it up in a requirement that scripting be enabled).
Ideally, when scripting the
canvas element the element should remain accessible. Since the
element is just a bitmap image, current accessibility work is aimed at providing a shadow DOM that can be
manipulated. To this end, developers can embed accessible elements (using WAI-ARIA states and properties)
canvas element to represent what is being drawn, thereby allowing assistive
technologies to interact with the accessible elements in similar fashion to how someone would visually
interact with the display.
Early experimental support is only just beginning to appear, however, so this page is subject to change.