Storyline custom focus control
========================================================================= Update 4th Feb 2025 Added a second argument that will determine if the target elements content will be announced to the screen reader, using the aria-live=assertive attribute. ========================================================================= 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.Accessibility Checker Early Access Sign-up
Hello everyone, If you've noticed this on the roadmap or seen the demo at DevLearn last November, you know we're building a new Accessibility Checker feature for Storyline 360. The Accessibility Checker will surface potential a11y issues that could prevent some learners from getting the most out of your course. Even better, it will explain why the issue is important to fix, how you can fix it, and, in some cases, it will even fix it for you with a single click! We've been working hard on this feature for the past several months and are nearly ready to let a small group of customers try it out and provide feedback via our Early Access program. Participants in the Early Access program will be able to use the feature via the Storyline private beta and communicate directly with the engineering team to ask questions and provide feedback that will help shape the final version of the feature. If you're interested in participating in the Early Access program, please fill out this interest form: https://lnkd.in/eFAPU3KD NOTE: Not all customers currently in the private beta program will be able to use the Accessibility Checker while it's in Early Access. Once Early Access concludes, the feature will be available to all private beta users for a period of time before being released to everyone. Thanks, RonnieIn Case You Missed It (ICYMI): Accessibility Updates in Q4 2024
Welcome to 2025! Since my last update, this accessibility group has grown by 61 members, bringing its total to 403 members. The first ICYMI edition was published on October 23, 2024, and established a foundation, but we can keep it short and sweet from now on. Product Updates: Rise 360 New: Immerse all learners in customizable interactive experiences with accessible scenario blocks that offer alternative text, screen reader support, and a visible focus indicator. New: Select the source course language when exporting your training for translation. Enhanced: Select the text of a hyperlink to apply formatting, including changing the color of the text. Enhanced: Line height and letter spacing are now available in the text formatting toolbar. Storyline 360 Enhanced: Expand your reach with a new AI text-to-speech model that supports Hungarian, Norwegian, and Vietnamese in addition to the 29 other languages already supported. Enhanced: You can now add text-to-speech narration and sound effects to markers. Fixed: Text alignment wasn't preserved in existing projects. Upcoming accessibility features: We've released Rise Accessible Drag-and-Drop Questions (Q1 2025, but released before posting this) and added Rise Math Equations. Current accessibility items on our feature roadmap include: Storyline Accessibility Checker Storyline Math Equations Rise Math Equations Updates in articles, documentation, resource center, or training: Refreshed: Storyline 360: Working with Hyperlinks New blog: What Is Section 508? A Quick Guide to Section 508 Compliance Upcoming webinar: Beginner's Guide to NVDA and Storyline for Accessibility Testing New entry in Storyline 360: Our Accessibility Journey - Accessibility Enhancements to Kick Off 2025Storyline Accessibility Survey Summary
Hi Everyone, In April 2024, Our team conducted a survey about accessibility and Storyline 360. I am pleased to share that I have now posted a summary of the survey findings. I encourage everyone to check it out. Engineering Journal: Storyline Accessibility Survey Summary Thanks, Ronnie PilmanUseful Tools and Resources
Hi everyone, I'd like to share some accessibility (a11y) resources. I hope these will be helpful in making your content more inclusive and accessible to everyone. Whether you're new to accessibility or looking to deepen your understanding, these resources provide valuable insights, and best practices to ensure your work is accessible to all users, regardless of their abilities. Thanks. Understood: Understood is the leading nonprofit empowering the 70 million people with learning and thinking differences in the United States. https://www.understood.org/ Funkify: A disability simulator that helps you experience the web and interfaces through the eyes of extreme users. https://www.funkify.org/ Accessible Numbers: Presenting numbers and data clearly. https://accessiblenumbers.com/ Neurodiversity Design System: A set of standards and principles that combine neurodiversity and UX design for Learning Management Systems. https://neurodiversity.design/ WhoCanUse: A tool that brings attention and understanding to how colour contrast can affect people with different visual impairments. https://www.whocanuse.com/ Viz Palette: Colors in action. https://projects.susielu.com/viz-paletteBehind the Scenes: Alternative text tip and counter
Hi there! When we released Storyline 360 Update 90 back in July, we introduced the following enhancement: When writing alt text in Storyline 360, you’ll now see a dynamic character count and a tip not to exceed 150 characters. You may be wondering why, well, check out this behind-the-scenes video! If you'd like to learn more about adding alternative text, check out Storyline 360: Adding Alternative Text for Screen Readers Thanks, Ronnie Pilman, CPACC Sr. QA Engineer II
Screen reader only text
A technique that is commonly used in web development, for accessibility, is to provide text that is available only to screen readers. The text is visually hidden, but can be accessed by text-to-speech and text-to-braille readers. An example usage may be, an image has been used as the heading of the page (maybe a specific font was required). Whilst an ALT text value on the image can describe it and relay the text contents, it cannot provide the same semantics an <H1> element can. Heading elements provide essential structure to the document for assistive tech users, and also provide really handy shortcuts for navigating through a document. <style> .screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } </style> <img src="https://thumbs.dreamstime.com/z/multi-ethnic-group-people-holding-text-diabetes-45539467.jpg?ct=jpeg" alt="" /> <h1 class="screen-reader-only">Diabetes</h1> Whilst we can't leverage CSS in Storyline, we can achieve the same outcome for accessibility. Using the same example illustrated above, we have a visual heading. The first step would be to ensure the image itself, is not visible to screen readers, by right clicking the image, selecting Accessibility and ensuring that the checkbox labelled Object is visible to accessibility tools is not selected (check mark is cleared). The next step is to relay this same information to screen readers. Start by inserting a text box on the slide and enter the same text that appears within the image. Then select the text you have just entered using CTRL+A. Then from the Text Styles drop-down menu, select the appropriate mark-up, in this instance, Heading 1. The next step is to check your Focus Order and make sure the new text H1 is in the correct reading order for screen readers. The final step is to emulate the "visually hidden" component of the solution. The most common methods I use is to either: Position the text behind the image that it represents, or Position off the slide (the content will still be accessible, even when position off screen). My first preference is to try and keep on the slide, and in a similar location to the image, but sometimes this is not possible, due to animation that is occurring on the slide, as I like to have screen reader text available right away. Following are the results. The video (attached) demonstrates the difference between ALT text and hidden text and the benefits of semantic mark-up.
