Storyline 360: Accessible Text

Article Last Updated

This article applies to:

People with low vision, dyslexia, or cognitive disabilities often change the visual appearance of website text to meet their needs and preferences. Now learners can change how text displays in published Storyline 360 courses too. For example, learners can use custom stylesheets or browser extensions to swap fonts, enlarge the font size, increase the line spacing, and more to make content easier to read. If text no longer fits within its bounding box when learners reformat it, a scroll bar appears so they can still access all the content. Read on for details.

Switch to accessible text in a Storyline 360 course and use a browser extension to change the formatting.

Switch to accessible text in a Storyline 360 course and use a browser extension to change the formatting.

Giving Learners Control of Their Experience

Storyline 360 has always published text as individual shapes (SVG text) so text looks exactly the way you designed it and displays the same way across browsers and devices. Pixel-perfect SVG text works great for many learners, but it can cause difficulties for learners with visual, reading, or cognitive disabilities who need to adjust its properties.

Starting with the December 2020 update for Storyline 360, you can let learners control their learning experience. Now Storyline 360 publishes two versions of your text—SVG text and accessible HTML text—giving learners a choice. Accessible text allows learners to adjust text properties, such as size and spacing.

Why does accessible text look different?

Accessible text is HTML text, and different browsers treat HTML text differently. As a result, there may be variations in line and character spacing across browsers even when learners don't change text properties.

Since some browsers add more spacing than others, you might see an unexpected scroll bar in some text boxes, such as slide titles. This happens when the text plus its spacing are bigger than the bounding box. If you want to avoid scroll bars in default accessible text, you can increase the height of the text box to account for differences in spacing across browsers.

Soon, we'll release a new feature, Text Autofit Improvements, that lets authors control how text displays when it overflows its bounding box. Allow the object's width or height to expand to accommodate your text or lock the object at a fixed size to preserve your slide design. When locked, you can display a scroll bar for text that doesn't fit or let the text overflow its container.

Author's Decisions

As an author, you must use modern text to give learners the option of accessible text. Modern text is the default text-rendering engine for Storyline 360 projects, so you probably won't need to do any extra work. To confirm that a project has modern text, go to the Design tab on the ribbon, click Fonts, and make sure Use Modern Text is selected, as shown below.

Modern text setting in Storyline 360
Test Your Course Online

To properly test accessible text, publish your course for web or LMS. Then upload the output to a server. Accessible text might not change as expected when viewing content on your local computer or in Review 360.

Storyline 360 automatically publishes both SVG text and accessible HTML text for each course (assuming modern text is enabled). You get to decide which version learners see first. SVG text is the default version, but you can make accessible text the default by opening the variables manager and setting the Player.AccessibleText variable to True, as shown below.

Change the default value to true for the built-in accessible text variable.

We recommend setting accessible text as the default to reach the widest audience. An accessibility-first mindset benefits everyone.

Learner's Choice

Learners can switch between SVG text and accessible HTML text by pressing Ctrl+Alt+T. If you enabled the accessibility controls in your player properties, learners can also go to the gear icon on the player and click the Accessible text option, as shown below.

Go to the gear icon on the Storyline 360 player and click the accessible text option to switch between text modes.

When learners opt to view accessible text, they can use accessibility tools, such as custom stylesheets or browser extensions, to change how the text appears. They can change any combination of font face, font size, line spacing, contrast, and more.

When viewing accessible text, learners may see vertical scroll bars in text elements when the text requires more space than the bounding box provides. This often happens when learners increase the font size or line spacing. Scroll bars allow learners to access all the content no matter how they choose to format it.

Scroll bars appear in a published course when accessible text doesn't fit within its container.

Compatibility

You can open Storyline 360 projects in Storyline 3, even though Storyline 3 doesn't have accessible text yet.

There's one exception. If you reference the new built-in variable, Player.AccessibleText, in a Storyline 360 trigger, the project file won't open in Storyline 3. Delete the trigger in Storyline 360 to restore compatibility with Storyline 3.

We'll add accessible text to Storyline 3 in a future update. Learn more about compatibility.