Skip to main content
R
Roslyn28128282ttqv
Participating Frequently
January 6, 2025
Question

Screen Reader Accessibility in Adobe Animate HTML5 Canvas

  • January 6, 2025
  • 2 replies
  • 700 views

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.

    2 replies

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    January 6, 2025

    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

    R
    Roslyn28128282ttqvAuthor
    Participating Frequently
    January 6, 2025

    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
    Community Expert
    Joseph LabrecqueCommunity Expert
    Community Expert
    January 6, 2025

    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. 

      Joseph Labrecque
      Community Expert
      Joseph LabrecqueCommunity Expert
      Community Expert
      January 6, 2025

      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. 

      R
      Roslyn28128282ttqvAuthor
      Participating Frequently
      January 6, 2025

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices