Flipboard’s New Web Design Favors Speed at the Expense of Accessibility
As Flipboard explained, they pulled off the great design by crafting much of the site inside HTML5 canvas tags. This has some advantages, including super fast animations, but it also comes at a cost. The website is largely inaccessible to the visually impaired (or anyone else who relies on Voiceover).
As Faruk Ate? pointed out yesterday, what Flipboard has actually created is the modern equivalent of a Flash-based website:
But again, I’m remiss to call it a Web version, as this product is an inaccessible flyer that is as ghosts in your iPhone. If you navigate by VoiceOver, don’t bother: VoiceOver doesn’t recognize any content to exist on the page.
Flipboard is a product focused heavily around text-based content, which is why it’s so deeply regretting that Accessibility was thrown completely out the window by the engineering team. The entire “Web” version was written in a pseudo-DOM (Document Object Model) inside an HTML5 Canvas element, because, as Michael Johnston wrote on the Flipboard Engineering blog:
If you touch the DOM in any way during an animation you’ve already blown through your 16ms frame budget.
Well if we can’t get 60fps for our flashy animations using semantic, accessible markup and CSS, let’s just build a
While Flipboard has made a token mention of supporting accessibility, Ate? is still right in that Flipboard has chosen to disregard basic functionality in favor of a flashy appearance.
It’s form over substance, and to make matters worse that form doesn’t work well on all platforms. The site blocks Safari on the iPad, is essentially nonfunctional on Android (I’ve given up), and Ate? reports that it’s just as bad on the iPhone:
I know the engineering team did not mean to make an inaccessible mess of a site that, despite herculean efforts, still stutters through animations on my iPhone 6 like an equally-beautiful Colin Firth midway through The King’s Speech. (Please excuse me for a moment while I check whether mine is the latest model iPhone with the fastest processor… Yes, yes it is.)
Congratulations, Flipboard. You’ve successfully made the modern equivalent of a Flash-based website.
And that begs the question: Whyever would you want to do that?
Okay it’s faster, yes, but the slower method also works everywhere and can be used by everyone. I agree with Ate?; that is more important than making a site which is fast and pretty.
images by Peter Huys