Screen Reader Accessibility in Adobe Animate HTML5 Canvas

[Roslyn28128282ttqv]

I have been developing online learning tools with Adobe Animate, but have received feedback from colleagues needing accessibility that their screen readers pick up nothing at all where the HTML5 canvas is embedded in my website.

I know that earlier versions of Adobe Animate had limited (although problematic) accessibility options, but all of the resources from StackExchange about adding ARIA-labels to Adobe Animate appear to lead to non-existant pages on the Adobe website (I asusme the information is obsolete, so Adobe took it down).

Is there a way that I can add ARIA-labels to the Javascript file after exporting my Animate Project so that the screen reader can at least read a description of what the text/buttons on a patircular frame are? I am not looking to have something that you can tab through as this is a whole nother level of accessibility that I doubt I can program.

[Joseph Labrecque]

Back in Flash days... there was a huge push for adoption of such technologies and wide support across industry. There are remnants of this within Animate. Sadly, they decided to burn it all down instead. 

[Roslyn28128282ttqv]

I understand this issue. I have friends who work at Adobe corporate who have explained the past and current state of Adobe Animate accessibility to me when I brought the problem. My question isn't about what was, it's about what are work arounds for the current state.

[JoãoCésar]

Hi.

I think the main issue is that the timelines and the shapes and symbols created by the IDE tools will live inside of the canvas.

So it's more like a limitation of this HTML element rather than Animate's. Every technology that outputs to canvas is in the same boat, I think.

That being said, it's up to the developer to create custom approaches to provide a more accessible content.

You can, of course, work outside the canvas, but it will end up turning Animate into a text editor.

Regards,

JC

[Roslyn28128282ttqv]

So in that respect, is there a way to make a label or a tag on the canvas that can automatically update with tagged information in the part of the javascript file that is visible on the screen.

For example, if I have two frames with buttons and the labels of those buttons are frame dependent, can I label or tag the buttons in a way that can be referenced in the HTML-5 canvas portion of the code to be read out loud if a screen reader is active.

[Joseph Labrecque]

The good thing about using components like buttons in canvas is that they are actual elements that overlay the canvas. So once you publish, you can edit the html to add additional attributes to those elements. 

[JoãoCésar]

@Roslyn28128282ttqv :
Yeah, I think that's possible.

You can have or add some html elements in the DOM that change their ARIA related attributes according to the current frame or your app. You would use JavaScript to expose the names/meaning of the buttons in the current screen for the readers.