Articulate Storyline 360 Software

www.articulate.com/360/storyline ↗

Description: Third-party software to build lesson branched simulations. Use Articulate360 Storyline to develop a lesson or part of a lesson.

Type: External Site / Third-party Tool

Keywords: Articulate, 360, Storyline, simulation, branched, branching, communication

Requirements:

• Articulate account (paid)

• Windows 10+

Developer notes:

• Check to make sure content is fully available offline on downloaded lesson. A print version is strongly suggested.

Examples

Lesson	Link
Using Heat Forecast Tools to Provide Decision Support for Extreme Heat Threats	See on deved →
Monitoring for Potential Flash Flood & Debris Flow Threats	See on deved →
Streamgage Basics: A Day in the Life of a Hydrotech	See on deved →
Smoke Forecasting and Communication	See on deved →
Communicating Potential Flash Flood & Debris Flow Threats	See on deved →
Communicating Subseasonal to Seasonal Impacts: Drought	See on deved →
Communicating Subseasonal to Seasonal Impacts: Climate Change	See on deved →
Communicating Subseasonal to Seasonal Impacts: Climate-Weather Interactions	See on deved →
Communicating Typhoon Risks in Taiwan: The Impact-based Forecast and Warning Services Approach	See on deved →
Communicating Hazards and Impacts During Extratropical Transition	See on deved →
An Introduction to Satellite-based Climate Data Records	See on deved →
Impact-Based Forecasting: Identifying Hazards and Constructing Impacts Tables	See on deved →
Air Quality Forecasting Fundamentals	See on deved →
The Process for Implementing Impact-based Forecast and Warning Services	See on deved →
Building Partnerships Through Communication	See on deved →
Aviation Focal Point: A Day in the Life	See on deved →

Development Guidelines and Best Practices

Using NVDA screen reader, or OS VoiceOver

To understand better what accessibility processes a learner may have trouble with, you’ll want to try to navigate through the developed content using mostly your keyboard whenever possible.

To navigate forward through elements use the [Tab] key, and [Shift + Tab]. In some elements you’ll be able to interact using the [left, up, right, down] arrows and [spacebar] or other keys to access sub-menus and other items.

DON’T assume a particular disability to target for your testing; instead try to see how YOU could navigate through your content as a user, and if there are areas where it may become too difficult or frustrating trying to figure out “Where do I go from here?” or “Can I complete this exercise?”.

PC Requirements:

• You’ll need a PC running Microsoft Windows 8.1 or newer

• Visit the NVAccess site to download https://www.nvaccess.org/download/
• Install the program or run it from the .exe file

• A web browser and internet connection. Keyboard and mouse.

Mac Requirements:

• You’ll need a Macintosh computer running Mac OS X 10.13 or newer

• Under System Settings > Accessibility > VoiceOver

  • Turn on and select your desired settings

• A web browser and internet connection. Keyboard and mouse.

What to look for:

• Elements that are not accessible by using only the keyboard

• Elements that are not properly described

  • Arrows that point to something without having a “title” or description

  • Consistent placement of exit buttons, with descriptor element that helps the user understand what the button is for

  • Accessible dialogs: modal windows, pop-ups, speech bubbles and items that appear after an action such as mouse-hover or click

  • All text that is shown should ideally be read through by the screen reader

  • Images without proper descriptor “titles” or “alt-tags”

  • Elements that are vague, such as:

    • Button 1, button 2, Begin Button, Button Group Button, etc…

    • Image A, photo B, etc…

    • Navigation menu, link, link, link, link, etc…

    • Characters that are labeled by default simply by their name, such as “Gianna, Image”, “Laura, Image”, “Dave, Button”, etc…

  • Background graphics that don’t contain alt-tags or titles. These graphics will default the screen reader to read the file name.

  • Cryptic file names in graphics without alt-tags or titles, such as “drew-beamer-c82okmc38sm20mzo.jpg

• Insufficient contrast or distinction between elements or graphics that are required to understand concepts or to complete exercises

• Can the user exit or escape their point of focus at any point?

• Can the user return to the parent container? Or can the user track back to where they started? Is there a way to reset or restart the interaction?

• Elements that may prevent you from continuing the exercise or interaction

• Icons that may visually help a learner distinguish list elements, such as bullet points, stars, asterisks, checkmarks, and arrows

  • These should be list items such as HTML: <UL> or <OL>

  • These should not be a graphic element with a description

• Bad overall navigation structure within each slide

• Non-readable text

How to improve it:

• For Articulate Storyline 360, please follow these guidelines to improve accessibility for each of your slides: Storyline 360: Using the Size and Position Window | Articulate - Community

  • Be as descriptive as possible with each element visible in the timeline for each the slides

  • Element right click > Accessibility will open up the menu for that object

• In accessibility menu, you can add alt-tags, and other options to improve accessibility for that object in the slide

• Make sure your elements have an index of [0] zero. Avoid using negative indices, or specific complicated indexing for elements using [1 or greater].

• Use “alt-tags” and “titles” wherever possible, these provide an additional layer of description for each element

• Try to keep the placement of exit buttons for dialogs, modal windows, and pop-ups consistent. Use the same shapes and colors across all your slides. Try to stick to the same positioning; if you add it on the top-right on slide 1, keep top-right placement for other instances across your slides.

• Be more descriptive with button elements, and images.

  • Add alt-tags or titles whenever possible

  • If characters from the Articulate Content Library are used within your slides, make sure these use more descriptive names such as “Dave - Hydroelectric Company Partner”, “Weather Observer Laura”, “Partner in disaster preparedness”, etc.

  • Use more descriptive labels for buttons such as “Talk with (subject)”, “Read more about (subject)”, “Begin learning (subject)”.

• If the background image has some level of importance in your slides, then make sure it contains an alt-tag or title. The file name for this graphic should not be cryptic. Opt for using file names that contain some level of detail using underscores whenever possible.

• Create an escape route for your user. Consider adding keyboard shortcuts and navigation using [arrows] or the [escape] key whenever possible.

• If the Articulate player and sidebar navigation are disabled in your slides. Consider having a “Point of Return” slide, that the user can go back to easily.

• Avoid using icons for visual purposes only, instead describe your icon or element by adding a title or alt-tag with its objective such as “item complete”, “section completed”, “area not completed”. Think of what the icon or item represents, and not what it makes the user assume visually or with a sound.

Examples

Here are some video examples of the NVDA screen reader navigation throughout various Articulate Storyline slides in MetEd:

• NVDA Screen Reader Testing

For most examples using this screen reader, I’m simply using the Tab key, Spacebar where there is a toggle, the arrow keys, and Enter when possible.

Compiled Resources

• Storyline style guide goals
• Existing MetEd Articulate Content
• Articulate Storyline Style Guidelines
• NVDA Screen Reader Testing
• Misc. Storyline Learnings
• Storyline Templates/Examples
• Saving Storyline Files to AV

  • Slack channel #Articulate

• Accessibility Review for Storyline Slides

Setting up Articulate Storyline slides project for Meted

• Setting up the “Player”

  • Improving accessibility settings

  • Streaming Capability

• Exporting settings

  • Saving to AV Drive

  • Saving to Team Slides

• Active Projects and MSDB

  • Filling out necessary components

• Accessibility optimization and testing

  • Request for MDG assistance

• Tech Review?

  • SCORM version of lesson or component

Objectives

• Reduce available fonts for use in Meted content

• Increase accessibility across slides and overall learner experience

• Consolidate development, process, and styling guides

• Reduce creator and developer “pitfalls” by using templates efficiently and effectively

• Encourage creators and developers to be creative instead of relying solely on templates and themes