Accessibility - Focusing

ActivePresenter
1

Question 1: “Focusable”
I’m following the instructions in the user manual:
For users with either visual or hearing impairment, ensure that users can interact with the output using the keyboard. For example, enable the Focusable property for mouse click objects so that users can use the TAB key to navigate between objects, and the ENTER or SPACE BAR key to activate it. You can also provide a key stroke object that acts as a hotkey for each mouse click object.

How do I enable the Focusable property? The link leads me to these below. Which, if any, of these options enables the Focusable property?

○ Tab Order: Allow specifying the tab order for objects. It is the order in which users move from one object to another by using the TAB key. There are four options to choose from:
○ Focusable Only: Only selected objects can receive focus. However, the TAB key cannot be used.
○ Auto: Objects will be automatically ordered. When the TAB key is pressed, objects will be selected randomly.
○ Specific Value: Define a specific order for an object. When the TAB key is pressed, objects will be selected in the order you’ve set.
○ None: Select this if you don’t want to give objects in any tab order.

AND
Question 2: How do you set an object to have a visual focus indicators (so a keyboard user can see what button/link etc. is focused?)

AND
Question 3: Besides the User Manual, what have you all found helpful in making AP content accessible? Tutorials? Guides? Anything?

2

Following up: I found an answer to question 2 - how to add the visual focus indicator when exporting. Is there any way to have that enabled during HTML previews to help me in testing accessibility.

3

Good morning Chante,

Please let me address each of your questions below:

Question 1: How do I enable the Focusable property? The link leads me to these below. Which, if any, of these options enables the Focusable property?

After selecting an ActivePresenter object on the Canvas > Properties pane > Interactivity tab > General section > Tab Order, you can select either of these 4 options (Focusable Only, Auto, Specific Value, None) to make the object focusable.

image
image396×218 4.49 KB

For precise keyboard navigation (e.g., using TAB to move between objects and ENTER/SPACE to activate them), we recommend selecting Specific Value and setting a numerical order. The None option should be avoided, as it prevents the object from being focusable, which would not meet your accessibility goal.
For more details, kindly take a look at this written tutorial: How to Use Tab Order in ActivePresenter 9 - Atomi Systems, Inc. or watch the video tutorial here:

Question 2: How do you set an object to have a visual focus indicators (so a keyboard user can see what button/link etc. is focused?)
Is there any way to have that enabled during HTML previews to help me in testing accessibility.

Just access the Export tab > HTML5 to open the Export To HTML5 dialog.
Then, tick the Enable Visual Focus Indicator > OK. By doing so, an outline will appear around the object that has been focused.

image
image629×311 7.63 KB

You can also find this information in the written and video tutorials I attached above.

Question 3: Besides the User Manual, what have you all found helpful in making AP content accessible? Tutorials? Guides? Anything?

Yes, besides the User Manual, we offer users written and video tutorials.
You can visit our Tutorials page or YouTube channel for more helpful tutorials about ActivePresenter features.
Tutorials page: ActivePresenter 9 Tutorials - Atomi Systems, Inc.
YouTube channel: https://www.youtube.com/user/ActivePresenter

Additionally, feel free to contact us here or support@atomisystems.com if you need any assistance while using our software.
We’re always ready to support you.

BR,
Thuy

4

Thank you! Is there a way to enable the visual focus indicator in HTML Preview?

5

It appears that the T/F question as a whole is selected with tab. I try to select each button, but I don’t have the option to choose the tab order for them separately. Forgive what I’m sure is a beginner’s question. How does the person using the keyboard select between the two if I can’t give each button it’s own order? I’m having a hard time testing to figure it out myself because I can’t see the visual focus indicators when I preview.

Thanks!!

image
image1011×192 5.92 KB

6

Hi,

For your information, T/F or multiple choice is a question with radio buttons, we cannot use Tab to move between radios. But we can use the Arrow keyboard to do that.
When the arrow moves, it will check the radio button so you can see which answer option is selected in HTML5 Preview.

BR,

7

I think there’s a number of issues in the way I modified the questions I think. As you can see, the little radio button indicators don’t show, and when you press the button, the question immediately submits (without pressing a submit button). Could you take a look and tell me:

  1. Can this be made accessible with the keyboard? If so, how?
  2. How do I see the visual focus indicators in Preview? I’ve followed the steps posted earlier which enable them while you publish in HTML, but I still can’t see them when I preview the project.

Here’s the project: https://drive.google.com/file/d/1TkoeZTHyyH1vO4eYQQ7Ty7lALmRaXGZ6/view?usp=sharing

Thank you!

8

Hi,

We’ve checked your project and see some issues with the way you design your slides.

  1. You should set the tab order for your question. The arrow keyboard both moves the focus and selects the focused radio.
    Or if you want to select the first answer option, you can press SPACE.
    Besides, the object states do not perform well. The states look quite similar, so it’s hard for learners to realize the differences. You need to fix them.
    Note: This type of question (True/False, Multiple Choice) is not suitable for users using keyboard to submit answers right after the radio is selected.
    You can set up moving the arrow to select the answer option, then add the On Key Press event to the slide to submit the question with the ENTER key.

  2. You should select the Enable Visual Focus Indicator > click OK to export your project to HTML5 folder first. Then, the next time you preview the project, you’ll see the visual focus indicator.

BR,