The Logical Blog by IconLogic

eLearning: Creating Accessible Content, Part 2

by Anita Horsley  

 

In the first article in this series, I discussed the definitions for Section 508, the amendment to the Rehabilitation Act of 1973, which requires all Federal agencies (typically schools and government institutions) to make information technology accessible to people with disabilities.

I also discussed the use of assistive devices that provide a way for people with seeing, hearing, or dexterity challenges a way to communicate and train using technology. People who have visual impairments use assistive devices such as Jaws, Window Eyes, and HAL. They also use screen magnification and braille displays/keyboards. People with hearing impairments need visual representation of auditory information such a closed captions and graphic displays. People with mobility impairments may need alternative methods to moving through your eLearning content, such as keyboard shortcuts.

The goal of creating accessible eLearning is to enhance your lessons by ensuring that all learners can master the instructional material and meet the learning objectives. When learning is accessible to all types of learners, you are not only complying with regulations, but you are reaching a larger audience.

Designing eLearning to Include 508 Compliance Standards

Most learners retain information through seeing, hearing, and doing. Keep that in mind when creating eLearning courses. It's relatively easy to ensure that a person who cannot see can hear your course content by adding narration and using accessibility text for images (also known as ALT text). However, the more challenging component to eLearning is keeping the lesson interactive.

When creating interactive eLearning, it's important to include accessibility that all learners can use. All learners need to be able to easily identify and select interactive screen objects. You should ensure you are using a tab order for any interactive components. And you should always provide meaningful feedback in your lessons... and offer remediation if necessary.

Here are a few general tips to Instructional Designers to improve effectiveness of accessible eLearning:

1. Use accessible online help (programs such as Adobe RoboHelp and MadCap Flare allow you to create Help Systems that adhere to Section 508 standards).
2. Alt (alternative) text for images, tables, and graphs (any purely visual object). For the visually impaired, Alt text is read aloud by assistive devices.
3. Use contrasting colors for learners who are color blind.
4. If you're using a slide-based eLearning development tool like Adobe Captivate or Articulate Storyline, name your slides. (The slide names are read aloud by assistive devices.)
5. Set a tab order for every interactive object (for keyboard accessibility)
6. Include keyboard shortcuts for all interactive objects (again, for keyboard accessibility).
7. Be consistent when adding slide-to-slide navigation.
8. Use tool tips. (Tool tips are read aloud by assistive devices.)
9. Use Closed Captions for learners with hearing disabilities.
10. Provide Printable versions of your course materials (for learners with hearing disabilities).

Watch for my next article which will cover a step-by-step accessibility eLearning plan.

***

If you'd like to take a 3-hour deep-dive into the best practices for creating accessible eLearning, check out Anita's live, online course. 

Adobe FrameMaker: On-Demand QR Codes

by Kevin Siegel   

Unless you've been deliberately avoiding them, it's a good bet you've come across images similar to the one below.

 

 

The image is known as a QR code. As you can see, QR codes are images that are made up of black and white squares. They are typically used for storing URLs or other information and can be scanned by QR Readers. In fact, if you have a smart phone, it may already have a QR Scanner. If so, scan the image above with the QR Reader and you'll be taken to the IconLogic website.

 

There's plenty of software you can find on the Internet that will allow you to create your own QR codes (some are free; some will cost you a few bucks). However, if you own Adobe FrameMaker 12, you have that ability to create QR Codes right now.

1. Open or create a FrameMaker document and click where you want the QR code.
2. Choose Special > Generate QR Code to open the QR Code Builder.
3. In the File Name field, give the QR code a name (it will be saved as a PNG image) and specify a storage location.
   
4. From the Type drop-down menu, select the type of QR Code you'd like to create (you can select from SMS, URL, Phone, Email, and Text).
   
5. In the image below, I selected URL from the Type drop-down menu and then typed the IconLogic website URL.
   
6. The final step is to set the size of the URL from the Size drop-down menu. (You can select a size from the Image Dimensions drop-down menu or type your own value into the Image Dimensions field.)
   
7. Click the Insert button to insert the QR Code into the FrameMaker document.

And that's that. If you only wanted to use the QR Code in your FrameMaker document, you're done. However, if you want to use the QR Code in a different program, or include it in a newsletter like I did above, you'll find the QR Code image file in the folder you specified when you named the image (see step 3 above).

 

***

Looking for instructor-led training on Adobe FrameMaker? Check out our live, online, instructor-led FrameMaker classes.

Microsoft PowerPoint: Find and Replace Fonts

by AJ Walther  

There are many reasons you may want to globally change every instance of a font in a PowerPoint presentation. Maybe you inherited a presentation from someone else and it needs a little work. Maybe you've had a change of heart about your own design choice. Maybe a client would prefer a different font. Whatever the case, manually changing every occurrence of a font could become a time-consuming task. Luckily, PowerPoint comes with a quick and easy tool to handle the heavy lifting for you. Here's how to use the Replace Fonts tool:

1. From PowerPoint's ribbon, choose Home > Editing and click the down arrow next to Replace to view more options.
     
2. From the Replace drop-down menu, choose Replace Fonts to open the Replace Font dialog box.
    
3. From the Replace drop-down menu, choose the font you'd like to find and replace. 
4. From the With drop-down menu, choose your new font.
    
5. Click the Replace button. 

Just like that, you've replaced every instance of the original font!

***

Want more creative PowerPoint ideas to take your eLearning to the next level? Attend our Optimizing PowerPoint Design for eLearning and Presentations live, online, instructor-led course. 

Microsoft PowerPoint: Embedding Fonts

by AJ Walther  

If you are sending your PowerPoint presentation off to be viewed on another system that is not yours, you may be concerned that this other system won't have the same fonts. No need to lose any sleep over what your final design will look like. If you've used TrueType fonts, you can embed them into your presentation and send them along with it.

TrueType fonts can be identified by a TT next to the font name in the font drop-down menu of PowerPoint. The fonts outlined in red below are all TrueType fonts.

 

Here's how to embed TrueType fonts in a PowerPoint presentation:

1. From the PowerPoint ribbon, choose File > Options.
2. Select the Save category at the left.
3. From the Preserve fidelity when sharing this presentation: area, select (check) Embed fonts in the file.
    
4. Choose the option under Embed fonts in the file that applies best to your situation. The first option will help keep the file size small; but if the person you are sending the presentation to will be making edits, you may need to select the second option.
5. Click the OK button to close the PowerPoint Options dialog box.

Now you can rest assured that your fonts will survive the trip to another computer system.

See also:

• PowerPoint: How to Instantly See a List of Fonts Used in a Presentation
• Reusing PowerPoint Animations and Audio In a Captivate Project
• PowerPoint 2007 & 2010: How to Extract Audio & Images from a Presentation
• PowerPoint 2007 & 2010: How to Extract Audio & Images from a Presentation, Part II

Microsoft PowerPoint: Measurement Unit Conversion in a Flash

by AJ Walther  

Here's a quick tip you may not already know that could save you some serious time with unit conversion. By default, PowerPoint measures in inches. But, if you're using PowerPoint as a design tool you might wish to work in pixels or centimeters. It isn't rocket science to Google your way to proper unit conversion, but there's an easier and faster way right there in PowerPoint.

For example, let's resize a shape using pixel dimensions. We want our final shape size to be 600 pixels high and 800 pixels wide.

1. In PowerPoint, insert a rectangle (Insert > Illustrations > Shapes > Rectangle).
2. Right-click the rectangle and choose Size and Position. (The Format Shape dialog box will open with the Size category selected. Notice the Height and Width fields are pre-populated with the current size of the shape inches.) 
3. Ensure Lock aspect ratio is deselected.
4. Highlight the measurement in the Height field and type 600px followed by the [tab] key. (The Height will automatically be converted to 6.25 inches.)
   
    
5. Highlight the measurement in Width field and type 800px followed by the [tab] key. (The Width will automatically be converted to 8.33 inches.) 

The same method can be used for centimeters. In the Height and Width fields, type your desired size followed by cm and press the [tab] key. Presto! Automatic conversion to inches!

Adobe Captivate 8: More is More

by Kevin Siegel   

Last week I told you about the great enhancements you'll see in Adobe Captivate 8 when it comes to image buttons. This week, I'm going to show you a few more improvements that I think you'll love.

Sample Projects/Tutorials

 

The first thing you'll see when you start Captivate is the Welcome screen. From this position, you can create a new project, record a software simulation/demonstration, or access recent projects. But take a look in the upper right of the Welcome screen and you'll see an awesome addition: Sample Projects/Tutorials (shown below, it's located in the upper right of the Welcome screen).

 

 

Granted, the icon to access the projects and tutorials is easy to miss; but once clicked, a dialog box opens and you'll have access to some really nice sample projects. The sample projects are shown first, followed by several tutorials.

 

 

 

If you have already opened or created a project, you will find a Sample Projects/Tutorials icon via the top of the Captivate window (to the right of the Help menu).

 

 

However, clicking the icon from here is different than clicking it on the Welcome screen. If you click the icon while in a project, you'll be taken online to Adobe KnowHow, where you'll find some free and pay-for-access training videos.

 

Characters and Agents

 

I love the Characters feature added to Captivate a few years ago, which allows you to insert images/guides within a project. And I was delighted to see that not only did Adobe keep Characters in Captivate 8, they've added quite a few. To add a Character, choose Media > Characters. Select a Category, select a character, and then double-click a pose to insert the character onto a slide.

   

 

Lastly, check out the Speech Agents (via Audio > Speech Management). Previous versions of Captivate included five Text to Speech Agents. You'll be happy to see that Captivate 8 bumps that number up to seven. New to the team are James and Yumi. I was particularly impressed with how good James sounded... a nice upgrade from Paul (sorry Paul). And Yumi covers you if you need audio for Korean eLearners.

 

  

 

***

Looking for instructor-led training on the top eLearning tools? We offer live, online training on Adobe Captivate, Articulate Storyline, Adobe Presenter, and TechSmith Camtasia Studio. We can also bring the same great training onsite to your facility. Interested? Contact us for details.

Writing & Grammar: Proper Use of Colons

by Jennie Ruby 

One grammar and punctuation rule that is violated left and right is the use of a colon after an incomplete statement. The rule states that a colon must be preceded by a complete sentence, like this:

We discussed the following topics:

• Budget
• Advertising
• Programming

However, in every place I teach, I find people routinely using colons like this:

We discussed:

• Budget
• Advertising
• Programming

This week, I'm looking for your opinion. Should we continue to hold out for that complete sentence? Or is this a rule we should drop from the books? Post your comments below.

***

Answers to the challenge on possessives with identifiers are brought to you by Katrina Del Vecchio. I have also included alternative answers by other respondents, as noted below. Thanks everyone! The variety of rewrites is fun to see!

1. Margie, my sister in Baltimore's house has a sump pump.
   • My sister Margie's house, which is in Baltimore, has a sump pump. 
   • My sister Margie's house in Baltimore has a sump pump. [Geri Moran]
   • My sister, Margie, lives in Baltimore. Her house has a sump pump. [Marilyn Flax]
   • My sister, Margie, has a sump pump at her house in Baltimore. [Matthew Hundley]>
2. The tree with the hanging swing's strong limb is beginning to bend.
   • The hanging swing is beginning to bend the tree's strong limb.
   • The strong limb on the tree with the hanging swing is beginning to bend. [Christine Pass]
3. The day on which her son is to graduates's date is May 30.
   • Her son's graduation date is May 30 
   • Her son will graduate on May 30. [Elisia Getts]
4. The cabin with the gravel driveway's fishpond overflowed last week.
   • Last week, the fishpond overflowed at the cabin with the gravel driveway.
   • The fishpond at the cabin with the gravel driveway overflowed last week. [Kay Honaker]
5. The golf cart with the broken wheel's driver was not injured in the crash. 
   • The crash did not injure the broken-wheeled golf cart's driver.
   • The driver of the golf cart with the broken wheel was not injured in the crash. [Karen L. Jones]

Adobe Captivate 8: Image Buttons to Write Home About

by Kevin Siegel   

Over the past few weeks I've been writing about the hot new features you'll find in Adobe Captivate 8 such as the new, easier to use, interface and responsive projects. Those two features are arguably the top changes you'll see if you're upgrading from Captivate 5, 5.5, 6, or 7 to Captivate 8.

As I've become more and more comfortable using Adobe Captivate 8, it's the seemingly minor improvements to the program that have me the most excited. Take Image Buttons for example. You've always been able to insert image buttons in Captivate. For the past several years, the most common way to insert a button was to choose Insert > Standard Objects > Button. Alternatively, you could use a tool on the little-used Object Toolbar to insert a button. Finally, if you're a keyboard junkie, you could press [control] [shift] [b] on your keyboard to get the job done.

 

Captivate 8 offers a streamlined path to inserting a button. First of all, the ill-fated Object toolbar is gone. Since I never used it, I, for one, am not going to miss it. However, the Insert menu no longer includes a Standard Objects menu item. Say what? So if the Object toolbar is gone and there's no menu item for adding a button, does that mean the only way to insert a button onto a slide is to press  [control] [shift] [b]? While you can still use the keyboard shortcut to insert a button, check out the top of the Captivate window. You'll see a new toolbar that essentially combines the old Main toolbar and the old Object toolbar into one, streamlined toolbar.

 

To add a button, find the Interactions drop-down menu on the new toolbar and choose Button.

 

 

 

A button will be added to the middle of the selected slide, just like previous versions of Captivate. Of course, I've never been fond of the standard text buttons available in Captivate. Instead, I either use Smart Shapes as buttons, or I use Image buttons. Over the years, my main complaint about Captivate's image buttons was that the buttons that shipped with Captivate were, to put it kindly, terribly boring.

 

I was pleasantly surprised to find that the buttons available in Captivate 8 are much, much better. Here's how you access the new image buttons and, along the way, set Image Buttons as the default when inserting buttons on a slide.

 

First, choose Edit > Object Style Manager. At the left side of the dialog box, select Button from the list of Standard Objects.

 

 

From the middle of the Object Style Manager dialog box, select Default Image Button Style.

 

 

From the top right of the dialog box, select Set as Default.

 

 

The next time you insert a button onto a slide, the button will use the Default Image Button Style. Next you'll specify which image will be used by the inserted image Button.

 

From the Button area, scroll down and review the images available for the Image Button. As I mentioned above, the list of available buttons in older versions of Captivate was very short, and very uninspiring. I'm sure that the enhanced images available in Captivate 8 won't make a graphic designer jump up and down with excitement. However, I'm neither a graphic designer nor an illustrator. I have to admit that I was excited to see the new images. In fact, I was so excited, one of my feet actually spasmed when I saw the improvements. (It was just one foot mind you, not both... let's not go crazy here.)

 

 

After selecting the image you like from the list of images, the final step is to simply click the OK button. The next time you insert a button via the Interactions drop-down menu, the button will be an Image Button, not a Text Button, and will be the button image you specified.

 

***

Looking for instructor-led training on the top eLearning tools? We offer live, online training on Adobe Captivate, Articulate Storyline, Adobe Presenter, and TechSmith Camtasia Studio.We can also bring the same great training onsite to your facility. Interested? Contact us for details.

Adobe RoboHelp: Show Variables in Topics

by Willam Van Weelden  

In previous articles you've learned about RoboHelp's User Defined Variables (how to create them, group them, and use them in topic titles).

As a brief review, variables can contain information that occurs frequently in your project, such as a product name, company name, or copyright notice. After creating the variable, you can insert it into any RoboHelp topic or onto a template by simply dragging and dropping. Now here's the cool part. Assume your company name now appears throughout your project and now you want to change it. Without the variable, you would have to search your entire project and update the company name. Thanks to variables, all you will need to do is update the definition of the CompanyName variable, and you will change the displayed company name project-wide in just a few seconds.

One issue you'll come across when inserting variables within a topic is that, by default, the variable text looks like regular topic text. In the picture below, I challenge you to locate the variable. 

  

Did you find the variable text? I'm betting that the answer is no. So what's the big deal? This can be particularly frustrating if you need to replace regular text with a variable. For example, you can highlight regular text in a topic and convert it to a variable by dragging the variable on top of the text. That's an awesome feature. Before I begin however, I need to be able to tell, at a glance, if the text I'm looking to replace is already a variable. As it stands, I have no idea since I cannot tell the difference between a variable and regular text.

Luckily, RoboHelp has a handy feature that allows you to distinguish between variables and regular text in topics. To enable this feature, simply choose View > Show > Fields.

 

Voila. All variables in topics are now shown as green text. Best of all, variables only show up green in your project... when you generate a layout, the green color will not be visible to your users.

***

Looking for instructor-led training on RoboHelp? We offer live, online training once each month. We can also bring the same great training onsite to your facility. Interested? Contact us for details.

Adobe Captivate 8: Responsive Projects for mLearning

by Kevin Siegel   

Creating eLearning for mobile devices was high on the wish list a few years ago when Adobe asked users for the top features they'd like to see added to Adobe Captivate. It wasn't long before Adobe responded by adding HTML5 as a publishing option. HTML5 allowed developers to create interactive content that can be used by mobile learners who have a device that does not support Flash.

Publishing HTML5 solved the issue of creating interactive eLearning on the iPad. But there remained another problem. The size of the screen that learners use can vary widely. Your eLearning lesson might look perfect on a desktop system but might be too small when viewed on a small device (such as a smart phone). To accommodate the many screen sizes, your only recourse was to develop several Captivate projects, sized specifically to work on each screen size. Of course that also meant that you'd have to edit and update several projects. No thanks!

 

Adobe Captivate 8 now allows you to create responsive projects. During the development process, you can basically create and work on multiple screen sizes (called break points) in one project. When you publish the responsive project, the learner will automatically be served the break point appropriate for the device they're using. This one Captivate 8 feature is the main, compelling reason that upgrading to Captivate 8 isn't just something to consider... it's mandatory if your mission is to create eLearning for desktop and mobile users.

 

To create a responsive project, double-click Responsive Project on the Welcome screen or choose File > New > Responsive Project.

 

 

Developing a responsive project is pretty much the same as developing a standard project, but there's one notable difference--breakpoints. By default, new projects contain three breakpoints for the most common screen sizes (for desktop users, tablet users, and smart phone users). You can click each of the breakpoints to see how the layout changes dependent upon the size of the canvas.

 

 

In the images below, I've selected each of the default break points I was given in my new project (you can create as many break points as you need and edit existing break points at any time).

 

 

In the images below, you can see a responsive project developed by Anita Horsley, and how she designed each canvas to work best with each of her break points. (As you review each image, pay particular attention to the position of the character as each break point is selected.)

Desktop user: 1024 pixels wide.

Tablet user: 768 pixels wide.

Mobile user: 360 pixels

Once you're done laying out each canvas, all you need to do is publish and post the lesson to a web server or LMS just like always. When the lesson is accessed by your learner, the lesson will automatically detect the learner's screen size and the correct canvas will be displayed. Awesome!

***

Want to learn more about creating responsive projects? Join our3-hour mini course on creating Responsive Layouts with Adobe Captivate.

 

***

Looking for instructor-led training on the top eLearning tools? We offer live, online training on Adobe Captivate, Articulate Storyline, Adobe Presenter, and TechSmith Camtasia Studio. We can also bring the same great training onsite to your facility. Interested? Contact us for details.