HTML5 Canvas Accessibility in Internet Explorer 9

The recently released Internet Explorer 9 beta implements the HTML5 specification’s canvas element fallback concept. This means that the content inside a canvas elements start and end tags is exposed to assistive technology users even when the browser supports canvas. It also means that any interactive elements, inside a canvas elements start and end tags such as links or form controls will be included in a documents default tab order even when the browser supports canvas.

A Portuguese translation of this article by Mauricio (Maujor) Samy Silva.

Canvas in IE9 has a navigable sub DOM

The HTML5 specification states:

When a canvas element represents embedded content, the user can still focus descendants of the canvas element (in the fallback content). This allows authors to make an interactive canvas keyboard-focusable: authors should have a one-to-one mapping of interactive regions to focusable elements in the fallback content.

Which translates as meaning the content inside a canvas element:

<canvas> <p>content</p></canvas>

If interactive, should be included in the tab order and operable with the keyboard. All content should be accessible to assistive technology such as screen readers. So in the canvas example, the text alternative should be announced by screen readers and the link should be navigable and operable using the keyboard.

Until now, this behaviour had not been implemented in any browser that supports canvas, but with the release of Internet Explorer 9, there is now a browser that does implement it as per the HTML5 specification. So if you are using IE9 with the keyboard to navigate interactive elements, you can tab to the link in the canvas example. If you are using a screen reader, you can also access the text alternative (in this case) content inside the canvas element.

Canvas example with a text alternative inside the canvas element.

Canvas example HTML code:

Note: added an ARIA role=”img” to identify the canvas object.

<canvas id="example" width="260" height="200" role="img">
  <p>A <a href="http://en.wikipedia.org/wiki/Rectangle">rectangle</a>
with a black border. In the background is a pink circle. Partially
overlaying the circle is a green square and a purple triangle, both
of which are semi-opaque, so the full circle can be seen underneath.</p>
  </canvas>

Some Potential Issues

• Where content is currently included in canvas, it is almost exclusively of the “get a better browser that supports canvas” variety, so screen reader users will likely encounter this when using IE9.
• Authors will most likely continue to provide useless information (for screen reader users) as the concept of “fallback content” in the HTML5 specification is not a suitable concept of what canvas content is for keyboard and AT users in browsers that support the canvas element.
• keyboard focus is lost if interactive elements are included inside the canvas, because while elements inside the canvas element are focusable by default, there is no corresponding default indication of focus to identify where current focus is.