HTML5 Canvas, 2nd Edition

Making Text Accessible

The W3C Reading text in Canvas document provides guidance on how future developers should handle text on the Canvas. To make text accessible, the W3C advises creating sub-dom elements for text. (See Chapter 1.) Here is what they say:

When an author renders text on a canvas with fillText or strokeText, they must also add an html element (div or span) with the same text, styling and position to the canvas subdom. The bounding box of the text should be set with the setElementPath method. (See http://www.w3.org/wiki/Canvas_hit_testing.)

This enables user agents to use the subdom text to deliver an accessible experience, as the subdom text acts as a proxy for the rendered text in the bitmap.

User agents that support caret browsing can use the subdom text cursor position to indicate the current caret location on the screen. Authors that wish to enable text selection can keep the selection range (on the canvas) in sync with the text selection range in the canvas subdom element; user agents can use that information to render a selection indication on the screen.