2 Replies Latest reply on Aug 23, 2016 2:56 PM by Doug Winnie, ACP

    Making html5 canvas documents accessible.

    keyarts70 Level 1

      My company does a lot of eLearning that requires our content to be 508 compliant (accessible to those with visual disabilities).  With actionscript, we could either bring focus to elements on the screen (text, graphics, button, etc.) either by using actionscript (tabIndex, accProps) or if that for some reason didn't work, we could use the accessibility window to force the screen reader to find the elements.  Now when creating an html5 canvas, the accessibility window is gone all together.  I've tried to find references to some equivalent code in JS or html that would replace the tabIndex and accProps scripts we used before to make our content accessible but have had no luck.  In Adobe's documentation for accessibility in Animate, they say if you want accessibility, design for actionscript 3 which kind of defeats the purpose of using Animate to convert our content that requires 508 compliance.  Does anyone have any insight into how this might be achieved in Animate when creating for an html5 canvas?

        • 1. Re: Making html5 canvas documents accessible.
          ClayUUID Adobe Community Professional

          The problem is that HTML5 canvas text can't be read by screen readers because once it's rendered, it's just pixels, not text. To work around this you have to hide the textual content "under" the canvas element, where it's invisible to the user, but accessible by screen readers. Googling for "html5 canvas 508" brings up some reading on this subject, like this: https://www.paciellogroup.com/blog/2015/02/html5-canvas-sub-dom/


          Or you can just include the entire text of the lesson as a PDF and call that the 508-compliant version. It's legal!

          • 2. Re: Making html5 canvas documents accessible.
            Doug Winnie, ACP Level 2

            This applies to any format or technology you use to create content for HTML5 Canvas, even if you code directly to it using CreateJS or other JavaScript frameworks.


            One possible workaround in addition to what ClayUUID indicated is to create a method in your project where text that is rendered on screen is routed through a method that injects it into an HTML element that can be accessible to screen readers. You can create a process where if you have a text string, you can have the text string populate your HTML5 Canvas text area, and then also insert it into the DOM for accessibility.