Forum Discussion
Focus Order and Disabled/ Hidden Buttons
Hi, I'm working on the accessibility of my first Storyline course. I have some buttons that can't be accessed until other parts of the course have been completed. If I add that to the focus order, will it be read out when it is first accessed or only once the pre-requisites are complete?
Hi MichelleConnerF using the "Disabled" state of the button is the best way to handle buttons for accessibility, if you do not want the user to access them yet, and they are visible on the page. This way, you can include them in the focus order, and users using assistive technology will understand that the buttons exist, but are also aware they are not enabled and cannot be used at that time.
If the buttons are visually hidden ("Hidden" state) on the page, until the pre-requisites are met, this is also fine. The buttons will be in the focus order once they are changed to their "Normal" state. This is also valid for accessibility.
Ensure that if you are making things hidden, be aware that visually impaired users may not be aware that an item that was hidden on the page is now visible. The user may only discover the element by accidental discovery, unless communicated to the user.
Hello Michelle!
HERE is a little information about the behavior of the Disabled state in Storyline.
How does the Disabled state behave?
The built-in Disabled state prevents anything from happening when an object is hovered over, clicked, or dragged. Although a disabled object is visible, it won't respond to any interaction from learners.Assuming you've used Disabled as the initial state, this means is the button will become available to the learner once it has been triggered to do so. Until then, it would not be activated via keyboard.
Happy developing, and thank you for thinking of accessibility from the start!
A small correction to this explanation "Until then, it would not be read by the screen reader". A disabled element can be read by the screen reader, but is announced as "unavailable". This is the key difference between "hidden" and "disabled".
Thank you, Sam! My brain seemed to have switched to keyboard access, so apologies on that mix-up! Adjusted my wording in the comment above.
Hi MichelleConnerF using the "Disabled" state of the button is the best way to handle buttons for accessibility, if you do not want the user to access them yet, and they are visible on the page. This way, you can include them in the focus order, and users using assistive technology will understand that the buttons exist, but are also aware they are not enabled and cannot be used at that time.
If the buttons are visually hidden ("Hidden" state) on the page, until the pre-requisites are met, this is also fine. The buttons will be in the focus order once they are changed to their "Normal" state. This is also valid for accessibility.
Ensure that if you are making things hidden, be aware that visually impaired users may not be aware that an item that was hidden on the page is now visible. The user may only discover the element by accidental discovery, unless communicated to the user.
Thank you both. I now understand better how to make it work.
