Forum Discussion
Setting multiple button states with disabled properties
Is it possible in some way to create states for buttons that would appear different and both function with the disabled trait (not being clickable)? Such as something matching the normal state until audio completes and then one that's greyed out to prevent them from clicking it again.
In the past I've used the work around of transparent boxes to prevent buttons from being able to be clicked however this is actually not an accessible solution and it doesn't actually prevent the buttons from being clickable, if you're using a screen reader and using keyboard commands.
Is there possibly a javascript solution that would make this possible or some other work-around? My thought had been possibly using layers for all audio but that seems a bit tedious.
Thanks
1 Reply
If you create a custom state (like "DisabledAlt"), that button is still clickable, it only looks disabled. So, if you don’t want the button to do anything when it’s in that custom state, you need to manually prevent it using conditions in your triggers. Only let the button do something if its state is not "DisabledAlt".
Trigger: Play media when user clicks a button
Condition: if a button is not equal to "DisabledAlt"
You can use a JavaScript snippet to change the cursor style when the button is in the "DisabledAlt" state. The only issue is that the "Hover" state can override the appearance, making the button look clickable again. So with this technique, I suggest not using the "Hover" state at all. Check the attached Storyline file for reference. In this example, I created a simple button that plays audio while in the "Normal" state. When the audio completes, the button state changes to "DisabledAlt", visually indicating that it’s no longer clickable. I also included a small JavaScript snippet to change the cursor style and prevent interaction.
