Forum Discussion
Assistance with Focus order on a FreeForm Pick one
Hi JoeBoss-fb8b9fe,
This is a common question, especially with freeform interactions.
For accessibility, the focus order should follow what a learner actually needs to navigate and interact with. In a Freeform Pick One setup, that means including the question text and the selectable objects (like your images or buttons with alt text), and ordering them in a logical sequence.
The “Pick One” container doesn’t need to be included in the focus order, since it isn’t something the learner interacts with directly. So your earlier setup focusing on the individual choices is the right approach.
One thing to keep in mind is that in pick-one interactions, screen reader navigation using arrow keys may not always move between options as expected. A reliable workaround is to use the Tab key to move between choices, which is how many learners will navigate these interactions.
Regarding SVGs, they generally shouldn’t affect focus order. As long as your images are set up as interactive objects with proper alt text, they should behave the same as other image types. If you’re using SVGs as answer choices, the key is to identify the SVG objects as selectable choices in Form View.
For feedback layers (like correct/incorrect), setting them to prevent users from clicking the base layer is a good approach, since focus will move to the layer when it appears.
Hi Eric,
Many thanks, that's helpful.
I have made the two objects themselves visible in the focus order, and added an additional state of selected (replacing the SVG in that state for one with a highlight).
Have removed 'Pick one' from the focus order, interesting that CoPilot is incorrectly flagging that as necessary!
I went back to last year's course and found that I had added a custom trigger for the 'pick one' items, of 'Set state of X to Selected, when the user presses Space after clicking on X'. That patched up the tabbing and space issue. Then found/remembered that you mustn't use that for a multi response otherwise it instantly undoes them. All seems to be working well now.
Noted on the prevent users from clicking the base layer, wasn't aware of that, though we do ensure that the layer items are also in a logical sequence in focus order.
Glad to hear that helped, JoeBoss-fb8b9fe, and thanks for sharing what you ended up doing! That’s a great approach, especially with the custom trigger and handling the selected state.
Really helpful context as well around how it behaves differently for multi-response.