Forum Discussion

StuMoriens's avatar
StuMoriens
Community Member
2 years ago

Accessibility of the Matching Drop-down Question Type in Storyline

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

storyline 360
  • EricSantos's avatar
    EricSantos
    Staff
    2 years ago

    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!

    • StuMoriens's avatar
      StuMoriens
      Community Member
      2 years ago

      Thank you, Eric. This was extremely helpful. I appreciate your prompt and thorough response!

  • ArthurJacobs's avatar
    ArthurJacobs
    Community Member
    10 months ago

    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.

  • EricSantos's avatar
    EricSantos
    Staff
    2 years ago

    Hi Stu,

    I'm glad you found it helpful; it's my pleasure! Please let me know if I can assist with anything else!

Related Content