[REDUNDANT] Storyline custom focus control
========================================================================= Update 18 March 2025 This functionality is now redundant. Please use the native focus trigger in Storyline 360 64 bit March 18, 2025 (Build 3.98.34222.0) ========================================================================= There have many been times, when using Storyline to develop content, it has not been possible to get the kind of screen reader focus control that I have needed. Using layers for this can only get you so far. I developed a JavaScript function that allows you to send the screen reader focus to the text field that you want, via any trigger. Adding the following JavaScript to your projects Slide Master will make it available throughout your module: // Check if function has been defined already if (typeof window.setFocus === "undefined") { // Get reference to the Storyline Player var $player = GetPlayer(); // Set the amount of time to delay before attempting to send focus to the target element (milliseconds) 1000 = 1 second. var $interval = 200; // window.setFocus = function ($target, $announce = false) { // Get the target element, based on the passed argument setTimeout(function () { var $div = document.querySelector('[data-acc-text^="' + $target + '"]'); var $id = "acc-" + $div.dataset.modelId $div = document.getElementById($id); if($announce) { $div.setAttribute("aria-atomic", "true"); $div.setAttribute("aria-live", "assertive"); } // Send focus to target, after defined $interval $div.focus(); }, $interval); } } Once the function is defined in your Slide Master, you can then call the function on the page using a JavaScript function, which can be triggered by any Storyline trigger such as timeline start, timeline end, button click etc. // The second argument will determine if the content should // be announced to assistive technology using aria-live=assertive // This will announce the text contents to the screen reader window.setFocus("Customer in the queue", true); // This will just send focus to the element. window.setFocus("Customer in the queue", false); The first argument, which is passed in the "" quotes, is the text contents of the text field you are targeting. You do not have to include all the text, just enough to ensure it is unique. For example, if you have two text fields: "Customer in the queue talking on their phone." "Customer in the shop staring into space." Passing the words "Customer in the" would not be specific enough, as there would be two text fields found. However, passing "Customer in the queue" would send the focus to the text field that contains the text "Customer in the queue talking on their phone." The second argument (true or false) determines if the target elements contents should be announced to the screen reader when it receives focus.In Case You Missed It (ICYMI): Accessibility Updates in Q2 2026
Welcome to our Q2 2026 update! This quarter continued our focus on supporting the creation of accessible training and improving the learner experience. From new capabilities for identifying accessibility improvements to refinements for screen reader users, keyboard navigation, and color contrast, these updates reflect our ongoing commitment to accessibility across Rise and Storyline. Our community continues to grow. We now have 970 members, an increase of 54 this quarter. We’re glad you’re here. Let’s take a look at what’s new this quarter! Highlights This Quarter This quarter's accessibility updates centered around three themes: Identifying accessibility improvements earlier Storyline Labs introduces an experimental Color Contrast Check that helps identify color contrast issues across an entire project, while updates to Rise theme colors ensure contrast is calculated correctly across supported theme elements. Giving authors more control Storyline now lets you choose which objects are visible to screen readers, giving you greater control over how your training is presented to assistive technologies. Improving the learner experience Across Rise and Storyline, we refined screen reader support, keyboard navigation, focus management, and question interactions to provide a more predictable experience for learners using assistive technologies. Together, these updates continue our focus on supporting accessible training and improving the experience for everyone who creates and completes it. Product Updates Rise Enhanced: To improve accessibility, we've globally applied WCAG 2.1-compatible contrast to theme color elements that previously had contrast calculated incorrectly. Enhanced: Improved screen reader focus behavior so that, after answering a knowledge check, focus moves directly to the next relevant content. Enhanced: Improved tooltip behavior so that only meaningful tooltips are displayed for interactive elements like the block selector and sorting activity. Enhanced: Preview now opens the entire course, with full navigation. Enhanced: The video player is now consistent across the app and provides a refined experience with better responsiveness on mobile devices. Storyline New: Easily control which objects should be visible to screen readers with a new accessibility toggle in the timeline. New: Storyline Labs is here! Access experimental features early from the Labs button in the File or View tab. Available in Labs: Color Contrast Check helps identify color contrast issues across an entire project using the accessibility checker. Fixed: Screen readers announced extra text when certain question types were used. Fixed: A trigger designed to fire with a user click incorrectly executed when using a screen reader. Fixed: Text-entry fields didn't follow the defined custom focus order during preview. Fixed: Windows Narrator read bulleted and numbered list items twice. Fixed: Screen readers didn't correctly announce nested list items in the Notes panel. Fixed: The accessibility checker incorrectly reported issues on screen recording slides where all objects were hidden from accessibility tools. Fixed: The focus order was incorrect for screen readers when the Transcripts tab was opened. Fixed: Drop-down question choices didn't display a scrollbar when the list couldn't fit all choices. Other Updates Updated Articles Storyline 360: Working with Buttons Rise 360: How to Use Process Blocks Rise 360: Our Accessibility Journey Storyline 360: Our Accessibility Journey Storyline 360: Working with Variables Storyline 360: Working with Triggers Storyline 360: Pick-One Questions Accessibility IndexNew Tutorial! Create and Control Glassmorphism Effects With JavaScript In Storyline
Hi Heroes, I'd like to share the latest episode in my Storyline Magic Series on my YouTube channel! In this episode, we'll delve into 'Glassmorphism'—a modern and powerful design technique that blends translucent surfaces with frosted glass effects. This approach not only enhances the aesthetic of your content but also helps learning designers create depth and establish a clear visual hierarchy. I’ll show you how to create and control this stunning effect entirely within Articulate Storyline 360. Let me know if you'd enjoy seeing more comprehensive start-to-finish project builds like this in the future! And see how other Storyline devs are using Glassmorphism here: https://community.articulate.com/blog/e-learning-challenges/using-glassmorphism-designs-in-e-learning-course-development-310/1151525 --- My name's Chris Hodgson, an eLearning developer and software trainer based in the UK. I enjoy creating fun, unique, and engaging online experiences using Articulate software! Connect with me on LinkedIn - https://www.linkedin.com/in/chrishodgson44/
New in Labs: Color Contrast Check in Storyline 360
Hello, my fellow a11y friends! We just launched the new Color Contrast Check inside Storyline Labs, and it’s ready for you to try out! This feature integrates directly into your built-in Accessibility Checker, making it easier than ever to catch text and object fill contrast issues before you publish. No extra tools required. We want to build the best possible version of this tool, which means we want to hear from you. Turn it on in your Labs settings today, test it out on your current projects, and let us know what you think. Check out the New in Labs: Color Contrast Check in the Accessibility Checker post for more details!Accessibility Checker - Switch off accessible objects
I'm using the accessibility checker to make all my courses 100% accessible. I open the project file, run the checker and go through each line, one by one. The most common error is an object (rectangle / line / icon) not being accessible. Why does a horizontal line ever need to be accessible? So I'm going through turning them all off as they don't need alt text. This is painful, some project files have 000s of errors. Is there a quick way to untick the accessibility of all shape type objects. Icons from the media library are grouped and the main group and its elements all need to be switched off. The acc checker doesn't allow multi select and when in the timeline selecting all and unticking doesn't always work. Its taking forever!Accessibility - Screen Readers and TTS
Hi, I'm currently completing an apprenticeship in Digital Learning Design, and I'm working through some content on accessibility. Previously, all our storyline courses had text-to-speech added on, but the accessibility features such as alt text and focus orders weren't used. Since I've learnt more about screen readers through my apprenticeship, I've been following correct processes and designs for best practice with screen readers. However, as these read out the text on screen, I'm wondering if the text-to-speech I manually add onto all slides is still required? Part of me thinks it might be too much if both the audio on the course and the screen reader are reading the content out loud, but then we might have learners with dyslexia, for example, who might not require a screen reader but still prefer to have the text read aloud. How does everyone else navigate this? Do you use both or one or the other? Thank you!Player Setup Recommendations for 508/WCAG 2.1 AA: Menu, Transcript, Navigation Buttons
Lately, I’ve been seeing an increased focus among organizations and government entities on ensuring Storyline courses meet WCAG 2.1 Level AA and Section 508 standards. While Storyline 360 offers several ways to create accessible content, I’m looking for general best practices for configuring the Storyline player so that it is straightforward for developers to implement while also providing a seamless experience for screen reader and keyboard users and meeting these requirements. I would love to hear your recommendations on the most effective way to set up the player, whether that means using the built-in player features or developing a custom navigation interface. Specifically: Transcripts & Glossaries: Do you recommend using the built-in player tabs, such as the Notes panel and Glossary tab, or is it better to build custom on-screen versions? If using the built-in player, does the Notes panel function sufficiently to meet accessibility requirements, or would you recommend a different approach for transcripts? If you do use the Notes panel, do you recommend placing it within the menu sidebar or at the top? The Menu: For menus that outline the course structure, do you recommend excluding it to reduce “tab fatigue” for screen reader users, or including it so learners can better track their progress? If a menu is included, do you prefer using the built-in Storyline menu or creating a custom one? If you use the built-in menu, is it best practice for the sidebar to start collapsed to keep the focus on the main content, or expanded for easier access? Also, when using the built-in player menu, do you recommend including subheadings? Navigation Buttons (Next/Prev): Do you recommend using the built-in Next/Previous buttons or adding custom on-screen buttons? While I know the built-in buttons now support accessibility shortcuts, many developers still seem to create their own Next/Previous buttons. I assume this is to provide a more intuitive end-of-slide experience. In any case, I would value your suggestions and would especially appreciate understanding the reasoning behind the recommended setup.Accessible systems training
Hi all, I was wondering what people's thoughts are on best practice of making systems training in Articulate Storyline360 accessible, targeting WCAG 2.2 AA. Presumably the system being recorded itself needs to be accessible to this standard for users. How does the built in screen recording show me/try me type content behave with screen readers and key board navigation? Any experiences from end users that use assistive technologies, that have been through systems training? Thanks in advance
