Accessibility of the Matching Drop-down Question Type in Storyline

May 15, 2023

Stu Moriens
By Stu Moriens

Hello,

The documentation on Articulate's website states that the matching drop-down is an accessible question type in Storyline. However,  if there is more than one choice / drop-down on a slide, the user's mouse gets trapped in the drop-downs, and the user can only use the tab key to move from one drop-down to the next (skipping the choice text). Ideally, when using the NVDA screen reader, the question text boxes and drop-downs would have their focus order set so that when navigating using the down arrow key, it would move from choice 1 to match 1, then from match 1 to choice 2, then from choice 2 to match 2, then from match 2 to choice 3, and so on. I can manually create an interaction that works this way, but I cannot configure the matching drop-down question type to work this way. Has anyone found a way to get the matching drop-down question type to work properly with screen readers?

Thanks!
Stu

4 Replies
Eric Santos
12 months ago05/16/23 at 3:07 pm (UTC)

Hi Stu,

Thanks for reaching out! Great question regarding the Matching drop-down question type and navigating via NVDA. When using a screen reader, learners use a combination of browse and focus modes.

Browse Mode: Used for reading. Learners use this (via down and up arrows) to navigate through all text and interactive objects on the slide.

Focus Mode: Used for user input. Learners use this (via Tab and Shift + Tab) to jump from one interactive object to another. This skips text and images.

You can refer to this article for details:

Here's a sample workflow for your reference:

  • Use the down arrow to read the slide's content until the drop-down is reached (this is browse mode).
  • Use Enter or Spacebar to activate the selection (places screen reader in focus mode).
  • Use the up/down arrows to hear the selections.
  • Use Enter or Spacebar to confirm your selection.
  • Use the ESC key or Insert + Spacebar (places screen reader back in browse mode) to get out of the drop-down.

I prepared a quick Peek 360 recording of this workflow for you. Here's my published Review 360 course if you want to test it out.

Let me know if you have questions!

Arthur Jacobs
5 months ago11/17/23 at 8:29 pm (UTC)

Hello Eric and Stu,

As a screen reader user, I'd like to point something out. While yes, screen readers allow a user to switch between browse and forms mode, that is not the way a screen reader user gets the label for a form element. That label should be programmatically set within the element. So, I do not know what Articulate means when it refers to these as accessible, if that programmatic label is missing or not able to be specified. See WCAG 2.2 criteria 1.3.1; 2.4.3; 2.5.3; and 4.1.2.

When a screen reader user tabs to one of these combo boxes, they should hear what the choices within that form element represent. Typically, in HTML5 that is done through a <label> tag that has a for="" attribute that references the id="" of the form element.

I understand that Storyline doesn't allow content creators to have that level of access to the code that is ultimately generated, but there should be a way to specify this accessibility label.

Sign In to Reply