Flipboard – React Canvas Accessibility

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

flipboard accessibility

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:

screenshot of Flipboard story about John Stewart resigning from the Daily Show, as rendered using HTML5 canvas.

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.
Categories: Technical
Tags: , ,

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Michael Johnston says:

Thanks for the write-up, Steve. The canvas sub-DOM approach is something we’re actively exploring to improve the accessibility of React Canvas. It works well for static content, but becomes problematic when you have scrollable regions.

VoiceOver on iOS picks up the height of scrollable content inside an overflow container so long as it has the CSS style -webkit-overflow-scrolling: touch. However, this does not work when the overflow container is in canvas sub-DOM. In addition, updating the sub-DOM during scrolling has proven to be quite slow.

We can solve the performance issue with batched updates. But we are still working on a solution for reporting the correct content height of overflow containers that works well without performance degradation. Any insights you have in this area would be greatly appreciated.

Steve Faulkner says:

@Michael,
Unclear as to why you need to use -webkit-overflow-scrolling:touch in the canvas sub DOM?
If you can provide URL for a test/demo file I will take a look.

Michiel Bijl says:

@Michael,

Why do you need to set the content height? Isn’t it enough to just have the content available in the first place? It’s not a matter of styling if you ask me, just the need for accessible content.

Or am I missing your point?