Blog Post

Discover
1 MIN READ

Storyline: Accessible Drag-and-Drop Chat Interaction

SarahHodge's avatar
SarahHodge
Former Staff
3 years ago

Are you looking to create more engaging interactions that everyone can experience? Some course creators mistakenly think they have to avoid certain online learning activities in order to meet accessibility guidelines. This accessible Storyline 360 drag-and-drop chat template dispels that misconception and shows just how easy it is to create engaging interactions that work for every learner.

If you’re an Articulate 360 subscriber, you can get a behind-the-scenes look at how to create something like this by checking out the webinar I did on How to Create an Accessible Drag-and-Drop Interaction in Storyline 360. 

 Explore this project. 

Published 3 years ago
Version 1.0
accessibility
Articulate 360
Download
storyline 360
Template
  • valerieryan's avatar
    valerieryan
    Community Member
    3 years ago
    Thanks for creating this template, Sarah. It's great. Enjoying your webinar as well. I appreciate that Articulate is doing so much to help us with making engaging accessible courses.
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      3 years ago
      Thanks so much, Valerie! It’s really important to us! 💙
  • BarbaraBruggema's avatar
    BarbaraBruggema
    Community Member
    3 years ago
    Hello Sarah, thank you so much for sharing this project. it's super clear and visually attractive.
    I am new to articulate and had a question:
    To which extent can I use this template? (public, non-commercial, ...)
    Thank you
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      3 years ago
      Hi Barbara and welcome! 🙂 I'm glad you like it! This template is free for personal or commercial use.
      • SuzanneCartner's avatar
        SuzanneCartner
        Community Member
        3 years ago
        Hi Sarah, does the same use apply to all templates or only the templates you created?
  • ToddRemer's avatar
    ToddRemer
    Community Member
    3 years ago
    Great presentation and the knowledge detail was perfect for me!
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      3 years ago
      Awww...thank you, Todd! I'm so glad it was helpful! 😊
  • SamanthaKiln's avatar
    SamanthaKiln
    Community Member
    3 years ago
    Hi, Sarah
    Great webinar on this just now - thank you!
    I am making a short Storyline 360 module on Accessibility for our eLearning Developers, plus I have also been asked to share it once completed across a few other NHS Trusts. I have nearly finished adding content, and am very pleased to say I have included almost all of what you went through in the webinar. However, I have a drag and drop in one of my modules I would like to adapt and showcase in my Accessibility module, but!!!!! It has multiple drag options and multiple drop options, rather than just one drag option to two different drop options. How can I adapt to cater for multiple options on screen, please?
    • SarahHodge's avatar
      SarahHodge
      Former Staff
      3 years ago
      Hi Samantha! It sounds like your project is going well! As for your drag-and-drop interaction, Sally Wiedenbeck shared this download file that seems similar to what you’re looking to do: https://community.articulate.com/discussions/articulate-storyline/build-an-accessible-drag-and-drop-interaction-in-storyline

      Another option I can think of (that could work similarly to the template I made here) would be to introduce all the options and drop fields, and then focus on one drop field at a time. Then have the learner select all the options that go into that one drop field. This makes it so the motion path always goes to that drop field. Then move onto the next drop field and repeat by having the learner select all options that go into that field. I haven’t tried building this yet, but just an idea!
      • SamanthaKiln's avatar
        SamanthaKiln
        Community Member
        3 years ago
        Hi, Sarah
        Thank you for replying - your idea sounds like a good one. I like that only one drop field will show at a time, I think that would work for me. I'm planning to have a 'play' next week, I'll let you know how it goes!
        Thank you
  • MarianneSeid410's avatar
    MarianneSeid410
    Community Member
    3 years ago
    Thanks, Sarah! The video example is very helpful. I have been using layers to avoid accessibility issues with state changes. I am going to look for situations where I could edit the alt text.
  • DanaProttas-1e1's avatar
    DanaProttas-1e1
    Community Member
    3 years ago
    Thank you so much for the excellent webinar and training, Sarah! I created a new media piece and it works perfectly. The one challenge I am having is getting the NVDA reader to read my Storyline piece. I also tried to use the NVDA reader on your example and it also won't read it. Wondering if you have thoughts. TIA!
  • MarianneSeid410's avatar
    MarianneSeid410
    Community Member
    3 years ago
    Hi, Barry,

    Have you tried adding triggers to change the state to dropped? A couple that might work are

    Change state of X to dropped when motion path Y completes on X.

    Change state of X to dropped when objects X intersects with target T.
  • MollieMcCorm985's avatar
    MollieMcCorm985
    Community Member
    2 years ago
    Has anyone verified that this is still accessible when you drop it into a Storyline block in a RISE course?
    • ManoelFranco's avatar
      ManoelFranco
      Community Member
      2 years ago
      I truly believe it is not. It creates an image and probably is skipped by the screen readers if not tagged, but I may be wrong.
  • MikeImage's avatar
    MikeImage
    Community Member
    12 months ago
    Great work. Best practice to be completely WCAG compliant, a submit button is necessary giving the user a chance to change their answer.