Behind 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 Storyline360: Adding Alternative Text for Screen Readers Thanks, Ronnie Pilman, CPACC Sr. QA Engineer
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 Accessibilityand ensuring that the checkbox labelled Object is visible to accessibility toolsis 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.Storyline Zoom to fit & Accessible text
Hi everyone!👋 Our team has enabled Zoom text fitting and accessible text features in our Storyline learning courses. Should we include these features and their usage in our navigation or control guide? I’d also love to hear your best practices to ensure we are providing the most accessible courses to our learners. Thanks in advance! 🤩Recent Accessibility Upgrades in Storyline
Happy release day, everyone! Storyline update 94 includes the following accessibility improvements for a better experience: Fixed: Keyboard navigation worked inconsistently when interacting with 360° images. Fixed: Screen readers didn't always announce layer content. Click the Update button for your Storyline app to check out all the latest goodness.Accessibility settings for grouped items
This may have already been discussed, if so forgive me. Many tools I use, if I group a set of items together and apply accessibility settings to the group, any child elements that are grouped will either be invisible or will inherit the settings given to the parent at the group level. For example, if I group a set of shapes, then mark the group as "decorative", none of the items within the grouping will appear in any kind of reading order. They essentially inherit the "decorative" setting applied to the parent group. This is not the case in Articulate Storyline, and as a result I often end up with a lot of additional clicks. Is there any conversation about changing this behavior?Storyline custom focus control
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 = 100; // window.setFocus = function ($target) { // Get the target element, based on the passed argument var $target = document.querySelector('[data-acc-text^="' + $target + '"]'); var $id = "acc-" + $target.dataset.modelId $target = document.getElementById($id); // Send focus to target, after defined $interval setTimeout(function () { $target.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. window.setFocus("Customer in the queue"); The 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."In Case You Missed It: Accessibility Updates Since July
Since our accessibility group launched in August, it has grown to 342 members! To keep you informed, we’re taking it back to July as a starting point for our updates. Since then, we’ve released important product updates, shared upcoming features, and published new and updated articles. We’ll keep sharing these “In Case You Missed It” posts as more improvements roll out. Stay tuned for more updates! Where are accessibility updates posted normally? Our version history pages—Rise 360 Version History, Storyline 360 Version History, and Reach 360 Version History—showcase all product updates. Our accessibility journey articles—Rise 360: Our Accessibility Journey and Storyline 360: Our Accessibility Journey—contain accessibility-specific updates. What features are underway, and where can I find them? You can see what our team is working on in the Articulate 360 Feature Roadmap. Current accessibility items on our feature roadmap include: Rise Accessible Drag-and-Drop Questions Storyline Accessibility Checker Storyline Math Equations What about accessibility updates in articles and documentation? We refreshed a few Rise and Storyline articles to include new accessibility sections: Rise 360: How to Use Scenario Blocks Rise 360: Using Heading Levels Storyline 360: How to Design an Accessible Course Storyline 360: Adding Pictures Storyline 360: Adding Audio Storyline 360: Adding Videos Storyline 360: Adding Content Library 360 Icons Storyline 360: Adding Tables We launched a new resource center that includes accessibility: The Importance of Accessibility in E-Learning Accessible E‑Learning Checklist What We Learned at axe-con 2024 What is WCAG? A Quick Guide to Web Accessibility Conformance We shared articles related to activities in our community as well as product updates: How Articulate Uses a Prioritization Framework to Drive Accessibility Maturity Check out this post for all the resources: Accessibility: Frameworks, Prioritization, and Maturity Announcing Our All-New Accessibility Group Oodles of Features to Improve Design Flexibility, Accessibility, and Course Distribution Breaking Language Barriers: How the Reach 360 Learner Interface Now Supports Multiple Languages That’s a lot. Could you summarize the most important product updates? Sure! Let’s break it down by product. Rise 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: Improve screen-reader navigation and readability for all learners with adjustable heading levels. 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. Storyline Enhanced: Enhance table accessibility with built-in screen reader support. Enhanced: When writing alt text in Storyline 360, you’ll now see a dynamic character count and a tip not to exceed 150 characters. Enhanced: We added a new Czech neural voice, Jitka, and a new German (Swiss) neural voice, Sabrina, for text-to-speech conversion. Reach 360 New: Make Reach 360 more inclusive by letting learners choose English, Spanish, French, or German as their preferred interface language, with more options coming soon.Accessibility: Frameworks, Prioritization, and Maturity
How Articulate uses a prioritization framework to drive accessibility maturity Thanks to everyone who joined us for this webinar with Deque. We had a great time, a great turnout, and some great questions. I wanted to share some resources with you: Webinar recording: How Articulate uses a prioritization framework to drive accessibility maturity Presentation slides Webinar takeaway - Accessibility Maturity: A Guide to Getting Started with Your Organizational Model In addition, I'm evaluating all the questions that came in, and I'll select the ones related to this topic that we did not discuss during the live Q&A. Let's continue the conversation right here in the comments! Original Post: Join Articulate for this free webinar with Deque on September 26, 2024. How Articulate Uses a Prioritization Framework to Drive Accessibility Maturity I'd love to hear about the processes your organization is using for accessibility maturity.Creating alt text for complex images easier
Hey folks, I'm really glad to see this new accessibility Group on E-Learning heroes. Right now in my own line of work, I'm pushing for really accessible courses and it's quite crazy how trainers are missing fundamental things such as alternative text on images. Which I would end up having to do to ensure a project gets done in time. Anyway, I made a video tutorial very recently on how you can speed up creating alternative text for graphics using Microsoft Copilot. It can also be done with other tools such as ChatGPT. I hope it helps and more importantly, gets more people to make sure that all their graphics have alternative descriptions. Enhancing Accessibility in Instructional Design with Microsoft Copilot
