Flipboard – React Canvas Accessibility

Flipboard announced yesterday that they are using HTML5 canvas to improve performance on mobile devices. This has accessibility ramifications.

Testing the Flipboard site on a mobile device such as an iPhone, quickly reveals that the content is not available to screen reader users. This is because the content is painted onto a canvas element using React Canvas. The words, structure and UI are all visual, there is nothing but pixels.

Reading the React Canvas documentation. It states:

Accessibility

This area needs further exploration. Using fallback content (the canvas DOM sub-tree) should allow screen readers such as VoiceOver to interact with the content. We’ve seen mixed results with the iOS devices we’ve tested.

I put together a very simple example of what Flipboard could do to make the content trapped in the canvas pixels available to other users:

Structured text and interactive content within the canvas sub DOM

<canvas id="myCanvas" width="300" height="533">
<header>
<p>From the daily edition.</p>
<h2>
<a id="theLink" 
href="https://www.buzzfeed.com/jarettwieselman/why-well-miss-jon-stewart-on-the-daily-show" 
> 19 Reasons We’ll Miss Jon Stewart On “The Daily Show”</a>
</h2>
</header>
<p>buzzfeed - Jarett Wieselman</p>
<p>We’ll need a million Moments of Zen to emotionally endure this loss. Nearly 16 years 
after he took over from Craig Kilborn as host, Jon Stewart announced on Tuesday that 
he would be leaving The Daily Show. But it’s hard to imagine a TV future without 
him for many reasons… Like, the fact that, …
</p>
</canvas>

Notes:

• Tested with VoiceOver on iPhone 4, the structured HTML content is available and can be interacted with.
• The test file only includes one event handler on the canvas that activates the link in the canvas sub DOM (to keep it simple for demo purposes and also because its the limit of my canvas scripting abilities.)
• It is presumed that since all the data that is written to the canvas is available it should not be onerous to include it in the canvas sub DOM and this could occur after the canvas has been painted, so as not to effect the performance benefits.