Buttons With Extra Shapes Won't Trigger Via Tab + Space Keys

Jul 29, 2014

Hi Forum

I've had a niggling problem for a while that I've just isolated to a particular cause - I think it's a bug.

If I have a button on a screen, I can usually navigate to it using the tab key (to get the handsome yellow box around it) and then press the space or enter keys to trigger a 'click'. This is great and handy for accessibility.

It seems, however, that if one of the states of a button has an extra shape on it - for example a small circle to indicate a visited status - using the space or enter key doesn't trigger the click.

The attached .story file demonstrates this.

Am I missing something or is this a bug?

Note that this is also true if you use rectangle (or presumably any other) shape instead of a button and seems very reproducable.

Thanks for any input or observations on this.


10 Replies
Ashley Terwilliger-Pollard

Hi Pete,

I know I've reported a similar bug to our QA team regarding grouped objects and the accessibility features not working as expected.This one seems a bit different, so I'm going to file a new report for this one with our QA team for review and share the example you created (thank you for that!). I don't have any information to share in regards to a timeframe or a workaround for this issue though, but as soon as I hear additional information from our team I'll post it here in the forums.

Please feel free to let us know if you have any additional questions!

Katarina  Derek

Hello Pete and Ashley!

I have an interesting case with buttons that contain objects (i.e., a checkmark) in their selected states. Most of these buttons in my course respond properly to the tab+enter (i.e., they display the associated layers and change states).

However on page 1.18 of the attached .story file the top buttons that contain checkmarks in their selected states are not being tabbed to at all. Is there an explanation for this behavior? Am I missing something obvious?





Greg Faust

What luck! I've also been recently figuring out these accessibility nuances.

In trying to find what might be making the difference, I discovered the same bug on slide 1.8. Slide 1.8 still works via the tab/space method because there's an alternate clickable over top of each button on the left; however, you can't actually tab to select the button itself. As with the buttons on 1.18, these buttons have a check mark added to one of their states.

My best guess are that the problem is due to either: 1) The clickable object having another object in one of its states, or 2) The combination of the extra object in a state AND the fact that the base object is a button.

If you're missing anything else, I'm missing it, too.

Katarina  Derek

Hi Greg!

It's funny...one cannot tab to images with states, but can to buttons without adding other objects to the states. However, adding images to the buttons can accomplish the desired action.

I will create tab images and place them into the buttons on page 1.18, so that I can keep the consistent "Selected" look.

Thank you for reviewing and giving me some feedback.



Greg Faust

Thanks, all. What would be REALLY nice is if we could bind object states to each other-- so you've got a master object (say, a transparent rectangle that sits over top of the buttons/pictures/whatever), and whenever that master object changes state(s) (to hover/down/hidden/etc.), it sends the command for all its slave objects (the objects under it) also automatically to change to the same new state(s). Enable tab-to-select for the master object, disable tab-to-select for the slave objects, and problem solved.

I realize it should be possible to do this with the "... when the state of [object] is..." trigger, but I've had trouble with this approach. First, it's an awful lot of triggering just to get one clickable object to work. Second, when I attempted to use this method, I had to give up after having all kinds of problems with Hover and other built-in states.

In case anyone else decides to try to make this work, here are a few hints:

  1. The states Hover, Down and Disabled don't actually overwrite the Normal or Selected states. In fact, Storyline treats a Selected, Disabled radio button as having BOTH states. Hence why a selected radio button doesn't lose the dot in it when you hover over it, despite the fact that the Hover state has no dot when you view states in the editor.
  2. The "Change state of Object 1 to [insert state] when the state of Object 2 is [insert state]..." trigger is weird. It attaches to Object 1, NOT object 2. The trigger will NOT activate while Object 1 is Hidden (or Disabled? [verification needed]).
  3. The master object needs to be a filled shape set to 100% transparency. A hotspot won't work because 1) Hotspots can't have states, and 2) Hotspots don't allow tab-to-select.

This discussion is closed. You can start a new discussion or contact Articulate Support.