Reading text in canvas

From W3C Wiki
Jump to: navigation, search

Change Proposal


[Please note that this page is about reading static text in canvas; this has nothing to do with text editing in canvas.]

Authors can draw text on a canvas element; the spec currently has insufficient guidance on how authors should make this text accessible. This document defines author guidance and argues that no new methods are needed to solve this issue.


Authors can draw text on a canvas element (For example: the labels and notes on a scatterplot); the spec currently has no guidance on how authors should make this text accessible.

To enable caret browsing and screen reader users to locate and understand text, the text rendered on the canvas bitmap should also be present in the canvas subdom with the same position and styling. This is in keeping with the current guidance in the spec that specifies that 'When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas.'


[Make the following normative text]

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

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.


Positive Effects

Authors will have a method to add accessible text to canvas.

Allows a screen magnifier user to locate and zoom text rendered on canvas.

Allows assistive reading tools to speak the appropriate content when the user points to items on canvas.

Negative Effects

Some additional burden on authors to make text in canvas accessible.

To improve on this solution, it might be prudent to add or change a method that will automatically generate and associate a subdom element with the correct text content, styling, size and transformation matrix applied.

Conformance Classes Changes

None identified


None identified