Adobe Captivate & eLearning: Screen Reader Best Practices

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

Last week I wrote about some Best Practices for Creating Compliant eLearning. I'd like to follow up that article with information about screen readers.

Screen readers are programs designed to allow visually impaired learners to navigate through a website or eLearning lesson by reading the content aloud.

Two popular screen readers are JAWS (Job Access With Speech) and Window-Eyes. According to Microsoft, "Windows 8 has built-in assistive technologies that work with both Windows 8 applications and with desktop software to provide seamless access to the entire Windows experience."

If you'd like to see a review of some of the top screen readers, Top 10 Reviews has some great information. For instance, there's a section in the article that deals with compatible applications, something that is often overlooked.

According to the article, "This (compatibility) is one category that should not vary (between screen readers) no matter what your vision level is. You want your software to be compatible with the basics of your computer–word processing applications, internet, email, PDF reading–but not all screen readers are. The best ones work well with newer versions of Microsoft Office, especially Word and Excel. They also include at least two different internet browser options, usually Internet Explorer and Firefox. A variety of email applications is nice, but at the least the software should work with Outlook and Outlook Express."

Each screen reader uses different methods to translate screen information into speech. As you create eLearning projects in Captivate, you can certainly add accessibility, but you cannot control how a screen reader interprets the accessible components you add to any one lesson. For instance, you cannot force a screen reader to read screen text exactly when you want, or how you want. For that reason, it is best practice to test your projects with multiple screen readers and learn for yourself how each screen reader behaves.

Tips for Testing Screen Reader Compliance

Adobe has invested significant resources into Captivate to ensure the lessons you create have the capability of being compliant. And Adobe offers the following tips for testing your lessons for compliance:

  • If you are designing your projects to work with screen readers, download several screen readers. Then test each project by playing it in a browser with the screen reader enabled.
  • Ensure that the screen reader is not attempting to "talk over" places in your project where you have inserted separate audio.
  • Several screen reader applications provide a demonstration version of the software as a free download. Try as many as you can to ensure compatibility across screen readers.
  • If you are creating interactive content, test it and verify that users can navigate your content effectively using only the keyboard. Screen readers work in different ways when processing input from the keyboard. For this reason, your Adobe Captivate content might not receive keystrokes as you intended. Make sure that you test all keyboard shortcuts.

See also: Establishing a screen reader test plan

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Adobe Presenter 9: Beginning Training

Have you created a PowerPoint presentation and need to convert it into an eLearning course? Perhaps you need to add a quiz to the presentation and be able to track learner success?

Adobe Presenter 9 allows you to transform your existing PowerPoint deck into eLearning complete with voiceover recordings, interactive objects, screen characters and videos.

During this full-day, online instructor-led class, you will learn how to create an eLearning lesson from scratch using both Microsoft PowerPoint and Adobe Presenter. Among other things, you will add characters and scenes to add personality to your presentation.

You will learn how to set up PowerPoint with slide notes that double as your voiceover script. Then you will learn how to record and edit voiceover audio.

As you move through this totally interactive class, you will learn how to add a quiz to the presentation and how to set up the lesson so that it will work with SCORM and AICC-compliant LMSs.

Finally, you will also learn how to publish the finished eLearning content as both SWF and PDF.

More information.

Adobe Captivate: Best Practices for Creating Compliant eLearning

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

A few years ago I was in Canada teaching Captivate for a large Toronto-based company. We were just getting ready to cover the accessible features found in Captivate when I was informed that I could skip the section because Canadians were not required to create accessible content.

Fast forward to a recent online Advanced Captivate class that included students from South America, Australia, and Canada.In speaking about accessibility with the class, it became apparent not only does the Canadian government now require compliant eLearning, but according to the Canadian students in class, the rules in Canada are often more stringent than those in the United States. I was also happy to learn that other counties, such as Australia, are also addressing accessibility when it comes to eLearning.

If compliant eLearning is a requirement for you, I would encourage you to review your local laws to familiarize yourself with as much information as possible. If you work in the United States, or create eLearning content for a U.S. company, you can learn everything you ever wanted to know about Section 508 compliance online. If you are working with Canadian companies, you should familiarize yourself with the Canadian compliance laws. (Note: The Section 508 website may be down due to the U.S. Govt. shutdown. If so, you'll need to try accessing the site once the shutdown is over.)

What Does Captivate do to be Section 508 Compliant?

Selecting the Enable Accessibility option (Edit > Preferences > Publishing) makes certain elements in Adobe Captivate projects accessible or open to accessibility technology. For example, if you select the Enable Accessibility option and you have filled in the project name and project description text boxes in Project preferences, a screen reader will read the name and description when the Adobe Captivate SWF file is played.

The following Adobe Captivate elements are accessible when Enable Accessibility is selected:

  • Project name (derived from Project Properties)
  • Project description (derived from Project Properties)
  • Slide accessibility text
  • Slide label (derived from Slide Properties)
  • Buttons
  • Playback controls (The function of each button is read by screen readers)
  • Password protection (If an Adobe Captivate SWF file is password protected, the prompt for a password is read by screen readers)
  • Question slides (Title, question, answers, button text, and scoring report are read by screen readers)

Output generated with the Section 508 option is displayed by all supported browsers. However, your output may not be Section 508-compliant unless it is viewed with Internet Explorer. Internet Explorer is the only browser with support for MSAA (Microsoft Active Accessibility).

Note: To access Flash files using a screen reader, users must have Flash Player 9 or later installed.

Tips for Creating 508-compliant Adobe Captivate SWF Files

While Adobe Captivate Section 508 output is compliant for navigation, make sure that other elements are also compliant in your project. Assistive software must be able to "read" elements on the screen to visually impaired users. Use these tips to design accessible projects.

  • In the Project preferences, write a meaningful name and description for your Adobe Captivate projects.
  • For users with hearing impairment, add text equivalents for audio elements. For example, when delivering narrative audio, it is important to provide captions at the same time. One option is to place a transparent caption in a fixed location on slides, then synchronize the text with the audio using the Timeline.
  • If your project contains visual multimedia, provide information about the multimedia for users with visual impairment. If a name and description are given for visual elements, Adobe Captivate can send the information to the user through the screen reader. Make sure that audio in your Adobe Captivate projects does not prevent users from hearing the screen reader.
  • Supply text for individual slides that screen readers can read.
  • Ensure that color is not the only means of conveying information. For example, if you use blue to indicate active links, also use bold, italics, underlining, or some other visual clue. In addition, make sure that foreground and background contrast sufficiently to make text readable by people with low vision or color blindness.
  • For users with either visual or mobility impairment, ensure that controls are device independent or accessible by keyboard.
  • Users with cognitive impairments often respond best to uncluttered design that is easily navigable.
  • If mouse movement is critical in your Adobe Captivate project, consider making the pointer twice its normal size for easier viewing.
  • Document methods of accessibility for users.
  • Avoid looping objects. When a screen reader encounters content meant for Flash Player, the screen reader notifies the user with audio, such as "Loading….load done." As content in a project changes, Flash Player sends an event to the screen reader notifying it of a change. In response, the screen reader returns to the top of the page and begins reading again. Therefore, a looping text animation on a slide, for example, can cause the screen reader to continually return to the top of the page.
  • If you are creating click boxes, you can make them more accessible by adding sound. The sound can play when users tab to the click box or hover over it. To add this accessibility feature, attach a sound file to the hint caption. (If you do not want the hint caption to appear on the slide, you can make the caption transparent and add no text.)
  • Accessibility in Adobe Captivate works better when all the slides have interactive content.

Source: Adobe, Creating Accessible Projects

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Adobe Captivate: Replacing Modified Styles

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

During my advanced Adobe Captivate class, I stress the value in doing things faster and more efficiently within Captivate. Take formatting objects as an example. In the image below, there are several text captions positioned on a slide. The formatting of the captions is something less than consistent.

In the spirit of consistency, I'd like all of the captions in the image above to look the same. To get there, I'm going to apply the same object style on every object. As I select the captions, I discover, much to my horror, that the developer who gave me the project did not use five different object styles to format the captions as I had assumed. Instead, the developer selected each caption, one at a time, and then manually formatted each one using the formatting tools on the Properties panel. (You can easily determine that a style was overridden by selecting an object and, on the Properties panel, observing the plus sign to the left of the style's name.)

Because the captions on the slide have been manually formatted (and the Default Caption Style overridden), my mission to ensure object consistency has now been muddied. Before I can apply a consistent look to the slide objects, I first have to reset the style back to the Default Caption Style. That's a simple job–all I'll need to do is select a modified text caption and, on the Properties panel, Style area, click the Reset Style tool (shown below).

The selected text caption will revert to the style assigned to the caption, without any modifications. The problem is that I'll need to repeat these steps for every modified object. If a project has a significant number of objects with modifications, this would take a fair amount of time rendering the process inefficient.

There is a better, more efficient way…

On the Properties panel, Style area, select Replace modified styles (this option is deselected by default).

Select a slide caption that contains the formatting you would like to use project-wide. On the Properties panel, Style group, click the Save changes to Existing Style tool.

You'll be prompted to confirm the action by clicking the OK button.

Every modified caption will be reset and will now follow the formatting of the saved style. (Compare the image below with the first image above and you'll see that all of the text captions have taken on the appearance of the selected object.)

If you would like to see a demonstration of replacing modified styles across multiple slides, check out the video I created on the IconLogic YouTube channel.

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Adobe Captivate: Pretest Actions

by Lori Smith

We recently introduced you to Captivate's Pretest feature. In this article, I'm going to follow-up with Pretests and teach you how to control a Pretest Advanced Action. Here's the scenario: your client or boss wants to ensure that all the learners know the material by passing a quiz. The boss doesn't care if the learner spends the time watching the individual slides that make up the lesson, only that learners are given a fair opportunity to pass the quiz.

You move forward and design an eLearning lesson that contains an introductory slide (slide 1), some pretest questions (slides 2 through 5), eLearning content slides (slides 6 through 50) and a final quiz (beginning on slide 51). If the learner is able to pass the Pretest right out of the gate, then you will not require the learner to review the course content. Instead, you will allow the learner to jump straight to the final quiz. However, if the learner fails the Pretest, the learner will be required to move through the course content before taking the final quiz.

While the scenario above sounds complicated to implement within Captivate, there is an action built within the Pretest that will get you started. Select any Pretest slide on the Filmstrip and take a look at the Action group on the Quiz Properties panel. Just below the Failure Levels drop-down menu you'll see an Edit Pretest Action button.

Edit Pretest Action button

Clicking the Edit Pretest Action button will open the Advanced Action window containing a basic advanced action.

Standard IF statement.

Let's take a look at what the action does. In the IF area, a System Variable named cpInfoQuizPretestScorePercentageis being checked to see if the learner's score is greater than 50. This means that if the learner gets over half of the points allocated in the pretest, he or she passes the pretest.

Take a look in the success and failure areas. Both are sending the learner to the very next slide (using the Go to Next Slideoption).

Standard Else statement.

In the images below, I have edited the Action so that it will use the Jump to Slide option. Should the learner score higher than 50, the Action will jump the learner directly to slide 51 (the quiz). Should the learner score 50 or lower, the ELSE segment of the Action sends the learner to the first content slide for the lesson (slide 6).

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

eLearning: How to Pick a Font Set

by AJ Walther Follow us on Twitter View our profile on LinkedIn

Picking the best possible font set can be an elusive task for even the most seasoned of designers. So if you have the design prowess of a vacuum cleaner, the task may seem insurmountable. Never fear, I'm here to help.

Think of Your End-product

Are you designing for print or for on-screen viewing? Are you designing for people who will view your design from large, high-resolution monitors? Maybe for mobile? Knowing where your design will be viewed is a good first step. If you are designing for print publication, serif fonts (those with hats and feet like Times New Roman) are easier on the eye in large quantities. On the other hand, if you're designing for on-screen consumption, a sans-serif font like Arial or Verdana will be easier to read. If you know your design will be viewed on low-resolution machines (or if you're really not sure), it's best to play it safe and use as pared-down a font as possible. If you know for a fact that your design will be viewed on a large, high-resolution machine, your design options open up pretty drastically.

Here are some good options:

IconLogic: Font examples.

Note: You could really choose any font in the On-Screen (high resolution) section. I have highlighted a few that I would suggest using only if your end-product will be viewed on a high resolution screen.

Identify Your Message

Studies have shown that regardless of content, fonts can convey emotions and affect trust levels in viewers. For this reason, it is important to decide what kind of a message you want to convey right off the bat. There is nothing wrong with a fun, fanciful font…unless, of course, you're not trying to convey a fun, fanciful message. For instance, would you want to give access to your personal financial information to The Bank of the Universe if their website log-in met you with this font?

Bank of the Universe fonts

On the other hand, if you're logging your four-year old in to play an exhilarating afternoon of digital make believe on the Happy Princess Ponies webpage, this seems pretty spot on.

Happy Princess Ponies webpage

Here are some examples.

Fonts that set the mood


Fonts for Body Text

The bulk of your message will be conveyed within your body text. If you are designing content for unknown screen resolutions, you're going to want a sans-serif font that will be easy to read on all screen sizes and resolutions. Because you don't know what system your learner will be using, you'll also probably want to stick with the standard cross-platform fonts (you can Google if you're not sure which fonts these are). You're designing something to introduce new employees to your Fortune 500 company. That means you want something inviting, mature and professional. In short: Comic Sans will not do.

Here are some examples of fonts that would work well in this situation:

Fonts for body text


Fonts for Headlines and Accents

If you're going to get creative, this is the place. As a general rule, I try not to use more than three fonts for one project. This typically includes one for body text, one for headings, and one as an accent. Every case is different; however I'll have a need for a fourth font for subheadings. In some cases I'll use only one font throughout, varying the size and boldness for visual interest.

Want to know a secret to picking fonts that go together? The secret is that many software programs have already done this for you in the form of Font Families. You've decided on Arial? Excellent! Arial often comes with a family of coordinating fonts including Arial Black, Arial Narrow, and Arial Unicode. Here are some other font families:

IconLogic: Font families

These are just a few of the font families. Others include Minion Pro, Myriad Pro, and Tekton. Including font families with just two fonts would make for a much longer list and would include many fonts worth looking into if you only need two fonts.

You may notice that only using fonts that come with families could prove rather limiting. What about all those other family-less, but equally useable, fonts? Let Google help you! Google has an interesting, and underutilized, Fonts page. Here's how it works.

  1. From the Google Fonts page, locate the Filters drop-down and select a category (Serif, Sans Serif, etc.).
  2. If you'd like further filtering, adjust the Thickness, Slant, and Width slider bars accordingly.
  3. Ensure the Sentence tab is selected from the top of the page.
  4. From the Text drop-down menu choose either one of the pre-loaded phrases or enter your own text. If you have a specific design in mind, I would suggest entering your own text.
  5. Here's where it gets really interesting. Pick any font that you like and from the bottom right of the font, click the third button, Pop-Out.
  6. From the Pop-Out window, choose the third tab, Pairings.

Google has taken the liberty of pairing your desired fonts with other fonts that the mighty Google machine has deemed appropriate. This is a great feature and very useful for designing. The catch here is that Google Fonts do not correlate to fonts found in Adobe or Microsoft software lines. They are their own thing. If you like this Google method you have a few options. First, you could download the Google fonts. They're free and open source so you can use them without penalty almost everywhere. But, if you're unsure about your use case, be sure to check the licensing agreement to ensure that your intended use is allowed. Second, you could use a site like Identifont to plug the name of the Google font into the Fonts by Similarity tool and peruse similar fonts that you might already have on your system. (I tried this and had some success, but many of the Google fonts I entered were not recognized by Identifont.) Or third, you could just use the font pairings as visual inspiration and use that to return to your own fonts to make similar pairings.

Do you have any font secrets you'd like to share? Please post them below.

Adobe Captivate: Align the Mouse

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

If you have recorded a software demonstration using Adobe Captivate, you have likely run across the issue of the dreaded "jittery mouse."

Here's the scenario: you are working on a project with several slides. On slide 5, the mouse is moving from point A to point B. On slide 6, the mouse has clearly gotten to point B.

Back on slide 5, you decide to move the mouse position (you can easily drag the mouse anywhere you want on the slide). And that's when the "jittery mouse" will bite you.

On slide 6 of the project, you'll notice that the mouse is no longer in the correct slide position because you moved the mouse on slide 5. If you were to play the project (previewing 5 slides is ideal for this kind of test), you would clearly see the mouse "jump" from its new position on slide 5 to its old position on slide 6. In fact, the jump looks almost as if the mouse pointer on slide 6 received some kind of jolt.

To fix the problem, you could go to slide 6 and attempt to manually drag the mouse pointer into the same position that you established on slide 5. But this solution isn't ideal because the mouse position has to be identical to the position on the previous slide. It will probably take several attempts to get it right. What's a developer to do?

  1. Go to slide 6 (this is where the mouse pointer is not in the desired slide position)
  2. Select the mouse pointer and choose Modify > Mouse > Align to Previous Slide.

    Adobe Captivate: Align Mouse Pointer

Bam! This is the perfect cure for the jittery mouse.

Note: You could have also gone to slide 5, right-clicked the mouse pointer and selected Align to Next Slide (or selected the command via Modify > Mouse).

If you would like to see a demonstration of aligning the mouse pointer with previous or next slides, check out the video I created on the IconLogic YouTube channel.

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

Adobe Captivate: Two-Bits for the Best Rate

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube
You can easily record audio from within Captivate by choosing Audio > Record to. You can record audio directly to slide objects, a single slide, multiple slides, or the project background. Regardless of your choice, you'll find yourself in the Slide Audio dialog box.

After clicking the Device link in the Audio dialog box, the Audio Settings dialog box will open. This is where you have to make an important decision about your bitrate.

Captivate 5 bitrates

You have two choices in the Bitrate drop-down menu: Constant and Variable. Constant Bitrates (CBRs) produce smaller file sizes. By contrast, Variable Bitrates (VBRs) tend to produce audio with a higher, more consistent quality level than CBRs, but the VBR file sizes will be larger than CBRs. For that reason, most Captivate developers stick with Constant Bitrate.

Then you have to select from one of the four bitrate settings: CD, Near CD, Custom or FM. So many decisions… so little time. Bitrate is defined as the number of bits that are conveyed or processed per unit of time. Using a higher bitrate setting, such as CD Bitrate (128 kbps), will result in higher quality audio but a larger published lesson.

If you decide to use a higher quality bitrate than FM Bitrate, you should spend time experimenting with the options to see which selection sounds best to you. As a general rule, the FM Bitrate is more than adequate for eLearning audio that will be played through typical computer speakers or headsets.

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.

eLearning & Design: Want to be a Better Designer? Play this Font Game

by AJ Walther Follow us on Twitter View our profile on LinkedIn

Did you enjoy playing the color game from my previous article? Did it make you the best designer ever? Almost? If so, don't you dare stop there! Now it's time to focus on fonts!

Last week I was having a blog designed for my personal use. My designer sent over three header samples in three different fonts. I obnoxiously responded with, "These are great, but I'd really like to combine the round punctuation of Option One with the character width in Option Two and the line weight of Option Three. Know any fonts that meet this criteria?" My designer was not amused and more or less put the task back in my lap. I was soon perusing thousands of fonts and attempting Google searches like, "tall, skinny font with round punctuation and lowered middle 'E' bar" with no success.

eLearning: The Font Game

In my font search I did eventually find what I deemed to be a suitable font selection, but I also ran across The Font Game from I Love Typography which, if nothing else, served as a fun distraction. But beyond being a fun distraction, the game became a bit more. The more I played the better I got at quickly identifying fonts by sight and name. Being able to eye-ball subtle differences in fonts (as well as becoming familiar with naming conventions) ended up helping me more quickly scout fonts to get to what I wanted for my own design purposes.

The Font Game is an iOS app for iPhones and iPads. In this timed game, you are presented with a font sample and asked to choose the name from four options. High scores can be added to Apple's Game Center. In addition to the Font Game, the app includes the Terminology Game (for learning typography lingo), The Flip Font Game (like the original font game but reversed–you're given the name of the font and choose the correct one from four samples), and the Match Game (like the memory game, but with fonts). The app isn't free, but if you're a design junkie (or aim to be one), $2 may not seem like an unfair investment to you.

Do you love The Font Game? Do you hate it? Do you have an alternate method for learning fonts? I'd love to hear from you.

Adobe Captivate: Add a Retake Quiz Button

by Kevin Siegel Follow us on Twitter View our profile on LinkedIn View our videos on YouTube

I’ve had several students in my Captivate classes ask if it was possible to allow learners to retake a quiz. It’s not only possible, but the solution is very simple.

Choose Quiz > Quiz Preferences. From the list of Categories at the left of the Preferences dialog box, select Settings. From the Settings area, select Show Score at the End of the Quiz. (This will add a Quiz Results slide to the project, which is where the Retake Quiz button will appear once enabled.)

Adobe Captivate: Show Score at the End of the Quiz

With the Preferences dialog box still open, select the Pass or Fail category. From the If Failing Grade area, select Show Retake Button and then click the OK button to close the Preferences dialog box.

Adobe Captivate: Show Retake Button.

The Quiz Results slide will now include a Retake Quiz button. You can size and position the button anywhere on the slide just like any other button.

Adobe Captivate: Retake Quiz Button.

When the learner takes the quiz and fails, clicking the Retake Quiz button will automatically reset the quiz score. In addition, the learner will be taken back to the beginning of the quiz.

If you would like to see a demonstration of adding a Retake Quiz button to a project, check out the video I posted to the IconLogic YouTube channel.

***

Looking for training on Adobe Captivate? IconLogic offers multiple live, online Adobe Captivate classes each month including Introduction to Adobe Captivate and Advanced Adobe Captivate.