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.
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.
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.
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.
We recommend setting accessible text as the default to reach the widest audience. An accessibility-first mindset benefits everyone.
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.
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.
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.