Recreating accessibility options

I have a learning object where I've used a pseudo element to display a background image. This obviously breaks the colour change accessibility options (Remove Background Images, Invert, Black on Yellow).

I'm trying to figure out if it's possible to recreate these features, or to add some additional rules depending on which option has been clicked.

As a very rough proof of concept I put this together, which essentially does what I need: codepen.io/anon/pen/GxqZMV

However, I can't get this to work in an XOT object - it just doesn't seem to acknowledge any of the clicks to the colour change options in the same way.

Am I missing something obvious here? Is it even possible to change/add to the colour change options in this way?

Hi Neil

I don't know exactly how you are putting this code in your Xerte project but at a guess I think the colour changer dialog doesn't exist at that point so it can't find the elements to attach your new code to.

The dialog doesn't get created until the colour changer button is clicked for the first time so you need to link your code to this first click. Try something along these lines to set it up:

That makes sense, and a quick test seems to work.

Thanks!