Jump to content


ADA for Banners, Part II

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys,


In a previous post, I asked about adding text to a banner that would be picked up by a screen reader, and got a great answer. The ad unit was given a once-over by some folks at the ADA, and they came back to us saying that we should have tabindex controls on any buttons in the banner as well. We have a play/pause, replay and the cta button that would need that attribute. 


My problem is, I built this particular unit in Animate CC, and don't know how to add tabindex to those elements. I saw that the 2dContext of the canvas element has a drawFocusIfNeeded() method, but how do I add that to my buttons?


Also, can anyone confirm that the content of the banner, if it's being iframed in, will receive focus if the user keeps tabbing?


Again, for the record, this is the first banner I've ever built that had all these strict ADA requirements, so I'm a little new at this.



  • Like 1
Link to comment
Share on other sites

I haven't heard much talk of accessibility in banners. Regarding giving elements a tab focus in Animate's canvas, my guess is that it's not supported. A quick glance at the EaselJS did not reveal anything. I would definitely recommend you reach out to the createJS team on this one. I'm sure they can be of better help.


An idea worth pursuing may be to overlay a DOM element on your canvas to act as the CTA button.



Regarding iframed content getting focus after tabbing, really not sure on that either, I haven't experienced it, nor have i tested.

Link to comment
Share on other sites

Thanks, @carl. Yeah, it's a new one all around. I'll post back with what I learn, as I can only imagine that since the web in general is moving towards becoming more accessible, this will come up again.

Link to comment
Share on other sites

All I know is that you need to map the coordinates of a button to your canvas. There are ways to access the canvas and context through Easel. Try playing around with the CodePen link on that MDN page you linked to.


Here's what it should look like, although this example is using Pixi. You can tab through the buttons and press space/enter to activate a button.


  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hi Blake,

Any idea how to reassign a tab index to elements?  I am actually using Animate CC canvas. I have buttons I randomized the y position but I want to be able to assign tabindex to them. I wrote a function to do it. the console tells me they are assigned but they do not take.  

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.