How To Test Your E-Learning Course with a Screen Reader
When you’re building an accessible e-learning course, one requirement is that your content work on screen readers. (If you’re not familiar with screen readers, check out this article before continuing: Accessible E-Learning & Screen Readers: What You Need to Know.) If you’re using Articulate apps to build your course, you’re in luck! Rise 360 and Storyline 360 courses work automatically on a variety of screen readers. However, it’s still a good idea to test each new course you create. It’s always a good idea to test your e-learning courses in the same environment as your learners to ensure they’re getting a good experience. For accessible courses, this includes testing them out with a screen reader. But if you’ve never used this kind of tool before, testing your course with one can be a challenge. After all, unlike your learners, you’re not used to screen readers, so you don’t know what to expect. That’s why we’ve got you covered! In this article, we’ll walk you through what to do, step by step. Here goes. 1. Get Comfortable with Your Screen Reader Before you get started, it’s important to set aside some time to understand the technology and get familiar with the controls so you don’t feel confused and overwhelmed when you go to test your course. To get to know the screen reader your learners are using, follow these steps: Screen readers are software, so you can easily download and install one if it’s not already on your device. If you know which screen reader the majority of your learners use, grab that one. If not, head over to this article for more information on the most popular screen readers. Learn the basic keyboard shortcuts (for computers) or multitouch gestures (for touchscreen devices) for your screen reader. Close your eyes and try “reading” something like a Wikipedia article just to get a feel for the experience. When you’re done, make note of anything that stood out to you. You might notice, for example: How the screen reader often provides context for what it’s reading by saying whether it’s part of the site navigation, a heading, a list, a link, etc. Some screen readers read punctuation out loud (dash, comma, etc.). Some screen readers (like NVDA and JAWS) stop reading after 100 characters. If you’d like it to continue, you can customize this setting or use the down arrow to continue reading. The big takeaway is to spend some time getting to know the screen reader your learners will be using. By testing out your course with the same screen reader your learners use, you’ll have a better feel for how it works and what your learners can expect. 2. Learn How Your Course Is Designed to Work with Screen Readers For the most part, screen readers interact with e-learning course content the same way they do websites. However, depending on the authoring app you use to create your course, there might be some differences. If that’s the case, it’s important that you be aware of them so you know what to expect. If you’re using Articulate apps, check out these articles for more information: 3 Insights About How Rise 360 Courses Work with Screen Readers 4 Things to Know About Storyline 360 Courses and Screen Readers 3. Review Your Course with a Screen Reader Now that you’ve taken the screen reader your learners will be using for a trial run and you’ve read up on how your course content works with screen readers, you’re ready to test-drive your course. First, make sure your screen reader is activated. Then, launch your course. From there, close your eyes and move through the course as a learner would—using the keyboard shortcuts or multitouch gestures. When you open your course, start by quickly going through all the content on the first slide. Screen reader users often move through the entire content of a page (or in this case, a slide) to get a feel for how it’s set up before deciding what to do. Test out this experience and see what it’s like. Then, start over and review the slide slowly, listening to the audio description for each item one by one. Continue moving through your course in this way, ensuring that you’re able to make it through from start to finish without getting stuck. As you go along, ask yourself the questions outlined in this article: A Checklist for QA Testing Courses with a Screen Reader. If you run into technical difficulties, follow these troubleshooting steps: Check your screen reader’s user manual to ensure you’re using the keyboard commands correctly. Review the information provided by your authoring app vendor about how content should behave and determine if what you’re seeing is expected or not. (See the article links in the previous section for Articulate apps.) Reach out to your authoring app vendor. If you created your course using Articulate apps, feel free to reach out to our support team. They’ll be happy to help you figure out what’s going on. 4. Ask a Screen Reader User to Review Your Course Once you’ve reviewed your course with a screen reader and made any necessary adjustments, it’s a good idea to ask someone who’s familiar with screen readers to review your course as well. If there’s no one on the project team who fits the bill, try reaching out to professional accessibility testers. People who are accustomed to consuming content in this way are sure to give you helpful feedback about the experience. Ask them to make note of any areas where they felt lost, the navigation was confusing, or the content was hard to understand. The Bottom Line Using a screen reader to access an e-learning course is a completely different experience than clicking through a course with your mouse and taking it in visually. The only way to ensure that the learning experience is a great one is to test it out for yourself. Looking for more tips on creating and testing your accessible courses? Check out these helpful resources: All About Accessibility 6 Best Practices for Designing Accessible E-Learning Articulate 360 FAQs: Accessibility How to Design an Accessible Course with Rise 360 How to Design an Accessible Course with Storyline 360 Do you have any experience testing your e-learning courses on screen readers? We’d love to hear how it went. Let us know in the comments! Want to try building an accessible e-learning course in Articulate apps, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.What Is Accessible E-Learning?
Whether you’re new to e-learning or you’ve been developing online training for years, you might be confused the first time someone asks you if your courses are accessible. After all, your courses are on the internet. Doesn’t that make them accessible? Well, not necessarily. In e-learning, the term accessible means the content is designed for all learners—including those with auditory, visual, mobility, or learning disabilities. To better understand what this means, let’s look at a typical online learning experience. A Typical E-Learning Experience Imagine this scene: our learner, Jane, is sitting at her desk in front of her computer. Using her mouse, she logs on to the company Learning Management System (LMS) and selects the e-learning course she needs to take. She turns up the volume on her speakers and listens to the narrator speak, while images fade in and out on the screen. A few moments later, the course poses a series of questions about the images on her screen. Jane uses her mouse to click on, drag-and-drop, and submit her answers. What I just described is a pretty standard e-learning experience involving fairly common activities. But are these activities accessible for all learners? Let’s take a look at how Jane’s experience might be different if she had a disability. Another Type of E-Learning Experience Let’s say, for instance, that Jane has hearing loss. What would her experience be like when taking this e-learning course? Think about it. The course has audio narration. How will Jane access that information? Are there closed captions or a script panel? If not, she will simply see the images on the screen and miss out on the accompanying audio. Now let’s imagine that Jane is visually impaired. The course also has information, images, navigation controls, and exercises on the screen. Can Jane use a standard screen reader tool to navigate the course? Do the images have alternative text so her screen reader can describe them to her? The course also has a drag-and-drop activity. Will Jane be able to complete this activity if she can’t see the items on the screen? These are just a few examples of how physical issues might impact access to an e-learning module. To create e-learning courses that are truly accessible, you’ll need to answer all these questions and many more. Accessibility is a vast subject and can also require you to think about things like font size, color scheme, and mobile design. Accessibility Standards To ensure all learners can access online learning materials equally, accessibility standards were developed. Let’s take a quick look at the two accessibility standards that are most commonly used in the United States: WCAG (Web Content Accessibility Guidelines): a set of accessibility standards for web design that can guide your e-learning accessibility efforts. Pop on over to this article for more details: Understanding WCAG: A Quickstart Guide for E-Learning Developers. 508 Compliance: Section 508 is an amendment to the Rehabilitation Act of 1973 that requires that all federal information available electronically be provided in a variety of methods to address various disabilities. Section 508 contains 16 provisions to guide your course development. Learn more about these standards here: What Is 508 Compliance for E-Learning and How Can You Achieve It? Exploring the WCAG and 508 Compliance standards is a great first step to learning more about accessibility. Here are some other resources that can help guide you on your journey: Four Reasons Accessibility Is Important 6 Best Practices for Designing Accessible E-Learning What You Need to Know About Designing Accessible E-Learning with Storyline 360 “But It’s to Code”: Thoughts on Accessibility in E-Learning I hope this article helps you get started down the right path in your journey to creating fully-accessible e-learning. If you have specific questions about accessibility, please don’t hesitate to post them below or in the Building Better Courses forums. You’ll find a lot of talented e-learning professionals ready to help you out! And if you found this article helpful, subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).17 Storyline 360 Features That’ll Help You Design Accessible E-Learning
For many organizations, creating accessible e-learning is both a mission-critical business goal and a legal requirement. The good news is that Storyline 360 has the features you need to create e-learning that meets Web Content Accessibility Guidelines (WCAG). In this article, we’ll walk you through how these key Storyline 360 features help you create accessible courses. 1. Accessible Player When you think about accessibility, screen reader compatibility is likely one of the first things that comes to mind. Luckily, the Storyline 360 modern player has built-in accessibility features that make it possible for learners with a variety of screen readers to interact with the course controls without any manual tweaking on your part. It also meets and exceeds WCAG Level AA guidelines for visual contrast and color. Interested in learning more about the built-in accessibility features in the Storyline 360 player? Check out these articles: The Accessible Player Makes Navigation Easier Modern Player Accessible Contrast 2. Accessibility Controls As a course author, one of the easiest ways to make your courses more accessible is by providing learners with options to customize their learning experience. After all, who better than your learners themselves to know what they need to be successful? That’s why we added accessibility controls to the course player. These controls allow learners to change the zoom mode*, turn accessible text on or off, toggle keyboard shortcuts, and turn background audio on or off. All you have to do is turn these controls on and let your learners choose the options that work best for them. Learn more in this article: Adjustable Accessibility Settings. 3. Full-Screen Toggle Another way you can give learners more power over the learning experience is by turning on the full-screen toggle option in the course player. Full-screen mode can help learners fully focus on the course by hiding other open tabs or windows. And then, when they want to switch to another task, they can simply toggle it off again. To learn more about this feature, check out this article: Full-Screen Toggle. 4. Course Playback Speed Control Learners with language barriers or cognitive disabilities sometimes want to slow content down so it’s easier to follow. And learners who want to quickly review content they’ve seen before often want to speed it up to save time. With this awesome feature, you can let learners choose a playback speed that’s comfortable for them—from 0.25x to 2x—for an improved learning experience. Find out more about how it works here: Course Playback Speed Control. 5. Accessible Text Learners with low vision often use custom style sheets or browser extensions to adjust the size and style of text on websites so it’s easier to read. Thanks to the accessible text feature, they can do that with text in your Storyline 360 courses as well. Learn more about how that works in these helpful resources: Storyline 360: Accessible Text Accessible Text Features in Storyline 360 6. Accessible Text Styles When learners access content using a screen reader, information hierarchy is important because it helps them understand how the content is laid out as well as the relationships between different elements. Accessible text styles allow authors to give screen reader learners this additional context by marking text object headings, hyperlinks, quotes, etc. For more information, head over here: Using Text Styles Accessible Text Features in Storyline 360 7. Text Autofit When it comes to making sure all your learners can access your content, another important consideration is text size. After all, if your copy is too small, learners might have trouble reading it. With the text autofit feature, you can set textboxes to a fixed size without shrinking the text if it overflows—so you know your learners will be able to read it easily. Learn more about this feature here: Text Autofit Improvements. 8. Course Player Font Size Because using different fonts impacts the perceived size of text, Storyline 360 allows you to customize the size of your course player labels to ensure they’re easy to read. Learn how to do that here: Choosing a Font for Your Course Player 9. Alternative (Alt) Text Alt text is important for learners who can’t see the images, graphics, or videos on the screen. It provides a description of the multimedia objects for screen readers to read aloud. You should add alt text to all slide objects that convey meaning or context to the learner. Thankfully, adding alt text is supereasy in Storyline 360. Here’s an article that’ll walk you through the steps for images within your course: Adding Alternative Text for Screen Readers. And here’s another one for adding alt text to a logo that’s embedded in the course player: Adding Alt Text to Your Logo. 10. Closed Captions Closed captions aren’t just for learners with hearing impairments. They’re also great for people taking your course in a language they’re still learning, in a noisy environment, or with cognitive disabilities, for example. That’s why it’s important to include closed captions for any audio or video content you choose to include in your course. Learn how to do that in these helpful resources: Importing Closed Captions for Narration and Videos Creating and Editing Closed Captions With the Built-in Editor 11. Closed Captions Formatting Make sure your closed captions are easy to read, and don’t block other content by customizing their look in the course player. In player settings, you can select your font and size, text and background color, and the placement location. 12. Video Transcripts Adding transcripts to videos is a great way to support learners who rely on screen readers, use braille displays, or prefer to read the audio content at their own pace. And with Storyline 360, it’s supereasy to add transcripts to your videos. Simply add closed captions and turn on the accessible video controls and Storyline will generate them for you automatically. It’s that simple! For more details about this feature, head over here: Video Transcripts. 13. Dialog Layers Dialog layers—also known as modal dialogs—are pop-up windows that prevent users from clicking anything outside of them. They improve learners’ navigation experience by making it easier to understand how to move forward. Learners who can see will notice that the rest of the course dims when the dialog layer appears, signaling they can no longer access content outside the layer. Learners using a screen reader will understand they can’t select anything else because the keyboard focus will stay on the layer. Learn more about this feature here: Dialog Layers. And here’s a time-saving tip! Thanks to feedback master defaults, you can set every slide layer in your project to display as a dialog layer by default. Check out this article for more details: Feedback Master Defaults. 14. Accessible Feedback Layers Quizzes are a fundamental component of most e-learning courses. Providing your learners with feedback that explains what’s right and wrong—and why—is essential. Given their importance, quizzes need to work for all learners. When you use the accessible feedback layers in Storyline 360, you can rest easy knowing that they meet WCAG guidelines for visual contrast, color, and focus—right out of the gate. Head over here to learn more: Accessible Feedback Layers. 15. Accessible Quiz Results And, of course, no quiz would be complete without a result slide, so those should be accessible as well. That’s why Storyline 360 includes accessible quiz result slide templates. Their sleek designs meet WCAG guidelines for visual color, contrast, and focus—guaranteeing that all your learners can digest the content of your result slides. View this article for details: Accessible Quiz Results. 16. Custom Focus Order Focus order is the order in which screen readers announce on-screen objects. It’s superimportant that the focus order be logical, or it’ll make for a confusing experience for your screen reader users. (Head over here for a more detailed explanation about why focus order matters: 4 Things To Know About Storyline 360 Courses and Screen Readers.) Luckily, that’s something you can easily customize as the course author. Here’s a tutorial that walks you through how to use this feature step by step: Customizing the Focus Order of Slide Objects. 17. Two-Color Focus Indicator When learners navigate using a keyboard, an outline—called a focus indicator—highlights the object they’re currently selecting. Without focus indicators, these learners won’t know where they are on the page—so it’s pretty essential. In Storyline 360, you can choose not just one focus color but two! This helps learners clearly see the focus indicators on dark and light backgrounds. To learn more about this super-helpful feature, head over to this article: Two-Color Focus Indicator. Wrap-Up As you can see, Storyline 360 has a ton of accessibility features to help you create courses that work for all your learners. And we’re always hard at work to bring you even more! Stay tuned to our feature roadmap to see what’s on the horizon. And if you’re looking for more accessibility-related resources, check out the links below: All About Accessibility Articulate 360 FAQs: Accessibility Storyline 360: How to Design an Accessible Course Storyline 3: How to Design an Accessible Course Want to try using these features to create an accessible course but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments. * The accessibility settings work in both the modern and classic player; the zoom-to-fit control, however, only appears in the modern player.6 Easy Ways to Make Your E-Learning More Accessible
Intimidated by the Web Content Accessibility Guidelines? You’re not alone. While it’s great these guidelines exist, most e-learning pros find them overwhelming. They’re long and written in tech speak, so it can be hard to be sure you’ve fully understood what they mean—much less ensure your courses comply with them. But the truth is, you don’t have to go from zero to 100% accessibility compliance overnight. Most e-learning pros aren’t experts in WCAG, but instead are taking baby steps toward accessibility—learning and improving incrementally. In this article, I’d like to walk you through some easy—but important—changes you can implement right away to make your courses more accessible. 1. Make All Text Size 12 or Larger When designing e-learning, keep text size in mind for clarity and readability. All you have to do is make sure all the text in your course is set to at least size 12, so it’s easier to read. Pretty simple, right? 2. Use Contrasting Colors Another simple thing you can do to ensure all your learners can read and interact easily with your content is to choose colors for foreground objects—like text and buttons—that stand out from the background. The easiest way to do this is by measuring the contrast—or the difference in brightness—between your foreground and background colors using an accessible color palette builder like this one. Here are two main rules to remember: The color of your text should have a 4.5:1* contrast ratio with the background color. The color of interface elements—like buttons—should have a 3:1 contrast ratio with the background color. For more information on contrast, check out this article: Contrast Considerations for Accessible E-Learning. 3. Make All Buttons 44 x 44 Pixels or Larger Changing the size of your buttons is another quick win. By adjusting all your buttons to at least 44 x 44 pixels, you’re making sure they’re easy for all learners to select—even if they have motor impairments. Check out the difference below: 35 x 20 pixels 45 x 90 pixels 65 x 185 pixels Try it out for yourself The bottom line is that the bigger the button, the easier it is to click because you don’t have to make as much of an effort to click in the exact right spot. 4. Add Alternative (Alt) Text to Informative Images and Hide Decorative Images Another easy way to make your courses more accessible is by adding alt text—descriptive text that screen readers announce to learners—to informative images in your course to explain what an image depicts. If an image is just decorative, you’ll want to hide it from accessibility tools so the learner won’t have to repeatedly press the tab key or screen reader navigation keys to advance to important elements. How can you tell the difference between informative and decorative images? Just ask yourself this question: If I removed this image, would the learning experience be impacted? If the answer is yes, it’s an informative image. If the answer is no, it’s likely a decorative image. For tips on writing effective alt text, read this helpful WebAIM article. Not sure how to add alt text or hide decorative images from screen readers? If you’re using Articulate apps, it’s super easy! Check out these tutorials to find out how it works: Storyline 360: Adding Alternative Text for Screen Readers Storyline 360: Hiding Objects from Accessibility Tools Rise 360: How to Add Alternative Text to Images 5. Include Closed Captions and Transcripts for Audio and Video To make your audio and video content more accessible, start including both closed captions and transcripts. For videos, make sure to include visual descriptions in the captions and transcripts so everyone can benefit from the additional context contained in the video. Why include both captions and transcripts? Because people who are deaf and blind can’t access captions. Not to mention that transcripts also allow people with cognitive impairments to read at their own pace. Luckily, adding closed captions and transcripts is easy in Articulate apps! Check out these tutorials for closed captions: Storyline 360: Creating and Editing Closed Captions with the Built-In Editor Rise 360: How to Add Closed Captioning to a Video And to add transcripts, here’s what I recommend: For videos in Storyline 360: Enable the transcript button after adding closed captions to automatically generate a video transcript. For audio in Storyline 360: Add a button that opens a layer with the transcript text on it. For audio and video in Rise 360: Add a single-tabbed accordion block below the audio or video block with the transcript text inside. If your course uses a lot of audio and video, it’s also a good practice to include a downloadable transcript at the beginning of the course, so learners can follow along that way if they’d like. 6. Customize the Focus Order (If Needed) Another thing that has a big impact on the learning experience of learners using screen readers is the order in which on-screen text and objects are read aloud—called the focus order. And it makes sense! Imagine if when learners open a slide with a tabs interaction, instead of starting with the first tab, they were directed to the middle one? And from there, instead of moving on to the next tab, it brought them back up to the slide title? That would be a frustrating experience, wouldn’t it? Of course it would! When you don’t define a logical focus order, learners using screen readers end up doing extra work to access the same information as other learners—and that’s not an equal experience. Luckily, if you’re using Rise 360 the focus order is taken care of for you, so you don’t have to worry about it. And if you’re using Storyline 360, you can easily customize it by following the instructions in this tutorial: Storyline 360: Customizing the Focus Order of Slide Objects The Bottom Line Will implementing these tips ensure your course conforms 100% to every WCAG standard? No. But you’ll be making a significant leap forward in the level of accessibility you’re providing—which will improve the learning experience for everyone. Want to learn more about making accessible e-learning? Check out this helpful article series: All About Accessibility. Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments. *According to the WCAG guidelines, large-scale text (≥ 14 bold or 18 regular) can have a contrast ratio as low as 3:1, but we simplified it to make it easier to remember and because a higher contrast is better.Free Webinar: How Articulate Uses a Prioritization Framework to Drive Accessibility Maturity
Accessibility is a journey, not a destination. Join us on September 26 from 2-3 p.m. ET for a conversation with Simon Taghioff, Senior Product Manager, Leslie McKerchie, Accessibility Program Manager, and Robert Pearce, Senior Software Engineer II, in a free webinar hosted by Deque: “How Articulate Uses a Prioritization Framework to Drive Accessibility Maturity.” Join us for a discussion on the Accessibility Maturity Model and how Articulate is using ours to operationalize accessibility across our organization. In this panel discussion, we’ll explore lessons learned from putting our maturity model into practice, including: The five levels of maturity Creating a prioritization framework Applying the framework in practice Measuring the impact on accessibility maturity Register for free now.Accessible E-Learning & Screen Readers: What You Need to Know
If you’ve been asked to create an accessible e-learning course, you might’ve come across the term “screen reader” and understood that your course needs to work with them. But what exactly are screen readers? Who uses them? How do they work? And how can you make sure your e-learning courses work with them? In this article, we’ll answer all those questions and more. Ready? Let’s dive in! What’s a screen reader? A screen reader is a software application that turns the visual content displayed on a computer or mobile device—like buttons, text, and imagery—into text-to-speech (TTS) audio or braille (with the help of a refreshable braille display). Many—but not all—modern devices come with built-in screen readers. Here’s a list of some common screen readers: JAWS (Job Access With Speech): JAWS is the industry-standard screen-reading software for Windows computers. This software must be purchased. NVDA (Non-Visual Desktop Access): NVDA is free, open-source screen-reading software for Windows. It was created as an alternative to the paid software. VoiceOver: The screen reader built into Apple devices. TalkBack: A screen reader created by Google that’s installed by default on Android devices. Who uses screen readers? People with visual impairments—like partial sight, low vision, color blindness, legal blindness, and total blindness—are the primary users of screen readers, since these impairments make it difficult or impossible to interact with computers on their own. However, some people with cognitive disabilities also use screen readers to cut out visual distractions and allow them to focus on the content. How do screen readers work? When people use screen readers on a computer, they rely on keyboard shortcuts—not a mouse—to navigate. On touchscreen devices, they use multitouch gestures. As they navigate, the screen reader converts on-screen information into text-to-speech audio or braille. For text-based information, this is pretty straightforward. The screen reader simply reads the text aloud or displays it in braille. But what about images? When screen readers run into an image, they look to see whether there’s any alternative text (alt text)—a description—associated with it. When creating software, websites, or e-learning courses, developers can choose to include alt text for this purpose. If no alt text is present, the screen reader will often read the file name. For example, if the learner comes across your person1.jpeg file, they’ll hear image person one dot j peg. Obviously, that’s not ideal, because it doesn’t provide the user with the same information as a sighted user. To give every learner a great experience, it’s a good idea to write effective alt text for informative images and hide decorative images, so screen readers skip over them. This is easy to do in most authoring apps, including Rise 360 and Storyline 360. Check out the basics of alternative text for some helpful tips to keep in mind. What’s it like to use a screen reader? Although there’s no substitute for the real thing, these short videos will give you a rough idea of what the experience is like: Screen Reader Experience on a Computer Screen Reader Experience on a Smartphone Screen Reader Experience on a Tablet Of course, the best way to understand the screen reader experience is to try it out for yourself. You can download NVDA on your computer for free or simply open the default screen reader on your mobile device and give it a test drive. Once you’ve got the screen reader open, close your eyes. If you’re on your computer, try to navigate using the keyboard shortcuts (e.g., the down and up arrows). If you’re on a mobile device, try using multitouch gestures. You’ll be surprised how different it feels to interact with technology without any visual input. How can you create e-learning courses that work with screen readers? Some authoring apps—like Rise 360 and Storyline 360—allow you to create courses that work with screen readers automatically. But if you want to provide screen reader learners with a top-notch experience, these articles share a few design considerations you’ll want to take into account: How to Design an Accessible Course with Rise 360 How to Design an Accessible Course with Storyline 360 Once you’ve created your accessible course, it’s a good idea to quality-test it with the screen reader that most of your learners will be using. For tips on how to do this, check out these articles: How to Test Your E-Learning Course with a Screen Reader A Checklist for QA Testing Courses with a Screen Reader Learn More Hopefully this article has given you some insight into what screen readers are, who uses them, how they work, and how to create screen reader–compatible courses. For more detailed information about screen reader usage, check out the results of this screen reader user survey. And if you want to learn more about creating accessible e-learning, be sure to dig into these helpful resources: All About Accessibility 6 Best Practices for Designing Accessible E-Learning Articulate 360 FAQs: Accessibility Do you have any experience using screen readers with e-learning courses? We’d love to hear about your experience! Leave a comment below to share. Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter).Understanding WCAG: A Quickstart Guide for E-Learning Developers
If you go looking for e-learning accessibility standards, you’ll see a certain four-letter acronym over and over again: WCAG. In this post, we’ll cover what WCAG is, why it’s important, and how you can apply it to your e-learning. What Is WCAG? Web Content Accessibility Guidelines (WCAG) is a set of standards for making web content, including e-learning courses published to the web, more accessible. Learn more about accessibility in this article: What Is Accessible E-Learning? Unlike Section 508, which is part of a U.S. law, WCAG standards are optional best practices maintained by the World Wide Web Consortium (W3C), an organization focused on developing open web standards. While not a requirement, WCAG is an important tool for e-learning developers who want to build accessible courses. That seems simple enough, right? But things can get tricky when you start digging into WCAG documentation.In addition to this lengthy document that lays out the WCAG 2.0 standards, there’s another, equally lengthy documentto help explain WCAG 2.1 standards! At a high level, WCAG has four sections: the principles of accessible design, the guidelines themselves, success criteria for levels of conformance, and specific implementation techniques. Let’s take a closer look. Accessibility Principles & Guidelines According to WCAG documentation, accessible web content follows four principles: it’s perceivable, operable, understandable, and robust. Twelve guidelines fall under these four principles—each with their own subguidelines. Here’s how each of these principles applies to e-learning, as well as a sample of some relevant guidelines that fall into each category. Perceivable Learners need to be able to access the information that’s presented. All parts of your course should be available to them regardless of their ability to see, hear, or touch. Guidelines for making your e-learning more perceivable include: adding alt-text to images, buttons, and other objects in your course making sure color is not the only visual means of communicating information providing learners with the ability to resize text Operable Learners need to be able to perform all of the actions required of them in the course. Guidelines for making your e-learning more operable include: providing keyboard-only navigation options giving learners the option to skip timed exercises making it possible to navigate your course in multiple ways avoiding course design elements that might cause seizures, such as flashing lights using section headings to organize content Understandable Learners need to be able to understand both the content of the course and how to navigate the user interface. Guidelines for making your e-learning more understandable include: making it possible for screen readers to determine the language used in your course providing learners with good instructions when requesting their input building consistent navigation and identification throughout your course Robust Course content must make sense to assistive technologies such as screen readers. Guidelines for making your e-learning more robust include: publishing courses to well-formatted HTML output assigning names, roles, and values to all elements in your course Conformance Levels Each of the WCAG guidelines, such as the ones listed above, is organized into one of three levels: A, AA, or AAA. It’s a common misunderstanding that Level A guidelines are “good,” Level AA guidelines are “better,” and Level AAA guidelines are “the best”; in reality, it’s a bit more nuanced than that. The WCAG level system accounts for all the factors one might consider when prioritizing the list of guidelines, including their goals and any logistical, technical, and resource limitations they might have. Here’s how to think about the guidelines at each level. Level A Guidelines This is the low-hanging fruit. As a best practice, all of your e-learning should meet Level A guidelines. These guidelines are easy to implement, and doing so makes your e-learning accessible to a broad range of folks in different demographics. It’s a win-win! Level AA Guidelines These are more specialized, and trickier to implement. Applying these guidelines affects a smaller group, but the changes have a big impact on those individuals. You should strive to make your e-learning meet Level AA guidelines as much as you’re able. Level AAA Guidelines These can be tough (and sometimes expensive!) to implement, and the changes impact a very specific group. Whether you decide to follow Level AAA guidelines really depends on the needs of your learners and organization. How Can I Build WCAG-Compliant E-Learning with Articulate 360 Apps? When you understand which guidelines are important to implement, it’s easy to make your Storyline 360 and Studio 360 courses WCAG compliant. And to make it even easier, we created these helpful resources that walk you through the some best practices: Storyline 360: How to Design an Accessible Course Rise 360: How to Design an Accessible Course And if you want to dig into the details of how our apps meet WCAG requirements at the A and AA levels, check out these resources: Storyline 360: Accessibility Conformance Report Rise 360: Accessibility Conformance Report All of these authoring apps are available with a subscription to Articulate 360. You can read our Articulate 360 accessibility FAQs for more details. More Resources Want to deepen your understanding of WCAG even further? Check out these helpful resources: W3.org: WCAG 4 Principles Karl Grove: Understanding WCAG Level Articulate: 6 Best Practices for Designing Accessible E-Learning And remember to follow us on Twitter and LinkedIn and come back to E-Learning Heroes for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.4 Things To Know About Storyline 360 Courses and Screen Readers
For the most part, screen readers interact with Storyline 360 courses the same way they do websites. However, there are some differences to know about—changes we’ve made to improve the experience. In this article, we’ll walk you through some key things to know about the screen reader experience, so you know what to expect. 1. Screen readers don’t announce Storyline 360 slide content automatically. Normally, screen readers automatically start announcing visual content when it appears. However, this can be problematic with e-learning courses, since it’s not uncommon for them to have audio or video that autoplays when you arrive on a slide. For this reason, when you arrive on a slide built in Storyline 360, the screen reader will announce the slide title and then wait for you to explore the rest of the content. For more details on this, check out this article: Screen Readers Don’t Auto-Read Content. 2. Screen readers often stop announcing content after a certain number of characters. Some screen readers (like NVDA and JAWS) stop reading after a certain number of characters (for example, 100 or 150). This is true for all types of content—not just content built in Storyline 360. If you’d like your screen reader to continue reading, you can customize this setting or use the down arrow to continue reading. To find out how to do this, refer to your screen reader’s user guide. 3. Screen readers announce objects from left to right and top to bottom. If you simply create your course as usual and hit publish, screen readers will read slide content from left to right and top to bottom. In many cases, this works fine. However depending on your slide design, there might be a more logical order. For example, if there are multiple columns, like on the slide below, it might make sense to read each one from top to bottom before moving onto the next instead of reading each row in order from left to right and top to bottom: Luckily, that’s something you can easily customize as the course author. Head over here for a tutorial that walks you through how to do this, step by step: Customizing the Focus Order of Slide Objects. 4. Screen readers announce all slide objects. Once again, if you simply publish your course as usual, screen readers will announce every on-screen object as the learner navigates. However, you can hide certain objects—for example, decorative images—so the screen reader skips over them. To do that, you can either remove that object from the focus order or right-click on the object, select Accessibility, and uncheck the Object Is Visible to Accessibility Tools box, as shown below. More Resources Hopefully these insights will help prepare you for testing your Storyline 360 courses with screen readers. But if you’re still feeling a little nervous, check out these resources for more help: Accessible E-Learning & Screen Readers: What You Need to Know How to Test Your E-Learning Course with a Screen Reader 9 Basic Screen Reader Commands to Know When Testing Your E-Learning Courses A Checklist for QA Testing Courses with a Screen Reader 5 Common Questions About How Storyline 360 Courses Work with Screen Readers Want to create courses that work with screen readers, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.3 Insights About How Rise 360 Courses Work with Screen Readers
On the whole, screen readers interact with Rise 360 courses the same way they do websites. However, if you’re not familiar with that experience, knowing that isn’t very helpful! In this article, we’ll walk you through some key things to know about the screen reader experience, so you know what to expect. 1. Screen readers start announcing Rise 360 course content automatically. When you open your Rise 360 course with your screen reader activated, it’ll automatically start reading your content aloud. 2. Screen readers often stop announcing content after a certain number of characters. Some screen readers (like NVDA and JAWS) stop reading after a certain number of characters (for example, 100 or 150). This is true for all types of content—not just content built in Rise 360. If you’d like your screen reader to continue reading, press the down arrow on your keyboard. You can also customize this setting. To find out how to do that, refer to your screen reader’s user guide. 3. Screen readers announce content from left to right and top to bottom. Just like they do with websites, screen readers read your Rise 360 content from left to right and top to bottom. This happens automatically—so you don’t have to do anything to make it work! Let’s look at an example: Screenshot of Lesson Screen Reader Announcement Order Lesson number Lesson title Author name Course content Note that since it’s decorative, I deliberately hid the image from the screen reader by putting two quotes ("") in the alt text field. That way, the screen reader skips over it. If I hadn’t done that, the screen reader would have read the image name or alt text before the course content. View interactive version. More Resources Hopefully these insights will help prepare you for testing your Rise 360 courses with screen readers. But if you feel like you need more information before you get started, check out these helpful resources: Accessible E-Learning & Screen Readers: What You Need to Know How to Test Your E-Learning Course with a Screen Reader 9 Basic Screen Reader Commands to Know When Testing Your E-Learning Courses A Checklist for QA Testing Courses with a Screen Reader Want to create courses that work with screen readers, but don’t have Articulate 360? Start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.9 Basic Screen Reader Commands to Know When Testing Your E-Learning Courses
When your goal is to create e-learning that’s accessible to all learners, testing your course with a screen reader is an important part of the QA process. But if you’ve never used a screen reader before, it can be intimidating to look at the long list of keyboard commands. Don’t panic! We’ve created a short list of the commands you’ll use most often. In this article, I’ll walk you through each command, explain why they’re useful, and show you how to execute them in the five most commonly used screen readers. Once we’ve gone through all the commands, you can download and print a quick reference guide to refer to as you test. Alright, here we go! 1.Pause Reading When you turn on your screen reader, you’ll notice it automatically starts reading everything on your screen. This can feel overwhelming at first, so it’s good to know how to pause the screen reader. Here’s how to pause reading in the most popular screen readers: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Ctrl Ctrl Control Two-finger tap Single tap 2. Start Reading (after Pausing) When you’re ready for the screen reader to start reading again, you’ll want to know what command to use. Here’s how it’s done: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Insert + down arrow Insert + down arrow VO + A Two-finger swipe down Swipe down, then right; scroll to “Read from Next Item” 3.Read Next Item Screen readers automatically stop reading after a certain number of characters (for example, 100 or 150). If you’d like it to continue, you need to use the Read Next Item command. You can also customize your screen reader settings so that it reads more (or fewer) characters by default. Here’s how to do it: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Down arrow or Numpad 9 Down arrow VO + right arrow Rotor, swipe down Swipe right 4. Read Previous Item And of course, it’s important to know the command to go back and read the previous item again, in case you missed it. Here’s how that works: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Up arrow or Numpad 7 Up arrow VO + left arrow Rotor, swipe up Local context menu (swipe up, then right), swipe right 5. Read Next Focusable Item (i.e., Link or Button) It’s also nice to skip from one focusable item (link or button) to another. That way you can quickly go through all the links or buttons on a page to find the one you want to select. Check out the commands: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Tab Tab Tab Swipe right Swipe right 6.Read Previous Focusable Item (i.e., Link or Button) Just in case you went through the links or buttons too quickly, it’s good to know how to go backwards. See the table below to learn how to do it: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Shift + Tab Shift + Tab Shift + Tab Swipe up Local context menu (swipe up, then right), swipe up 7. Activate Link or Button Once you find a link or button you want to select, you’ll need to know how to activate it. Here’s how to activate a link or button in different screen readers: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Enter Enter Enter Double tap Double tap 8.Go to Next Heading It’s also useful to know how to skip to the next heading. This lets you move quickly through content without reading it straight through. It’s the screen reader equivalent of skimming. Learn how below: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack H H VO + Command + H Rotor, swipe down Local context menu (swipe up, then right), swipe down 9.Search Another great way to find the content you’re looking for is by searching for a keyword. Find out how here: NVDA JAWS VoiceOver (macOS) VoiceOver (iOS) TalkBack Ctrl + F Ctrl + F Control + Option + F Not available Use the browser’s “Find in Page” function More Resources When you realize you only need a few keyboard commands to navigate through your e-learning course with a screen reader, it feels a whole lot less intimidating, doesn’t it? And it’ll be even easier once you downloadthis quick reference guide that outlines how to execute these commandswithNVDA, JAWs, VoiceOver (macOS), VoiceOver (iOS), and TalkBack. Once you’re comfortable with these basic commands, you can grow your screen reader skills by heading over to this Deque University page and checking out the full list of keyboard commands for these screen readers (and others!). Looking for more help creating accessible e-learning content? Check out these helpful resources: All About Accessibility Articulate 360 FAQs: Accessibility Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (formerly Twitter). And if you have questions, please share them in the comments.
