Articulate: Word of Mouth Blog

The Articulate Blog

Gabe Anderson

Word of Mouth is the Articulate blog, hosted by Director of Customer Advocacy Gabe Anderson.

Gabe loves to share his passion for all things tech and enjoys learning from Articulate customers around the world.

Contact Gabe or follow him on Twitter here.


This guest blog post was written by Articulate Customer Support Engineer Brian Batt.


Exploring compliance with Section 508 is often a confusing venture, but it doesn’t have to be that way. One way of achieving Section 508 Compliance is by providing a compliant alternative for those with accessibility needs. Part of the difficulty in producing Flash content that can be read by a screen reader (such as JAWS) is that Flash content, by its very nature, is visual and usually interactive; neither of which plays well in an environment where a screen reader is used.

For example, in Engage, take a Guided Image diagram: How would someone who is visually impaired navigate a guided image in any way that was beneficial to her? Also, often with software products that enable you to produce 508-compliant Flash content, the output either strictly adheres to the 508 standards, or only loosely meets 508. Thus, you either have content that loses much of its interactivity or creates a negative experience for those with accessibility needs.

With the wide range of publishing options available in Articulate Studio ’09, you will be able to create Section 508 compliant materials rapidly and easily with a positive user experience for all users.

According to Section 508, 1194.1 Purpose:

“Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”

Using PowerPoint and Articulate ‘09, there are several different ways to make your content Section 508 Compliant, including the following:

  1. Convert your PowerPoint presentation to an HTML page and provide a hyperlink to an MP3 version of your narration by using the Publish to Podcast option in Presenter ‘09.
  2. Use the Publish to Word option in Presenter ‘09, Engage ‘09, and Quizmaker ‘09 to provide Word versions of your content.

First, let’s take a look at creating an HTML page, publishing an MP3 version of the presentation, and linking the files together.

Save the Presentation as a Word Document

Since saving a PowerPoint presentation as an HTML page in PowerPoint does not create an accessible format, we’ll begin by saving the presentation as a Word document:

Convert PowerPoint to Word

In the “Send to Microsoft Office Word” option screen, choose “Notes below slides” and “Paste” as shown below:

Choose notes below slides and paste

After clicking on the OK button, Microsoft Word will open a copy of your presentation.

Example in Word

We’ll begin using Word like a basic webpage editor. We can change the wording where the slide numbers appear in order to provide a better description of each slide; we can also change the size of each of the thumbnails. You can change the image size of the thumbnail by simply right-clicking the image and choosing Format Object > Size. Be sure to scale the image proportionally and never go above 100%.

Also, since the slide notes of the presentation are likely just a transcript of the narration, it is important to edit visual and interactive references. If the slide notes reference something that is visually occurring on the screen, then the text will need to be rewritten so that it describes what is happening in a written format. This same principle will need to be applied to any interactive elements as well. For example, if the narrator asks the end user to click on an answer on the screen, then you will have to modify the text so that it reads more like a typical paper-based course.

Adding Alt Text to Images

The last step required before creating an MP3 version of our presentation is to add alt text to each of the images.

Jared Smith of WebAIM: Web Accessibility states that:

“Alt, or alternative, text should convey the important content of each image. This text is provided as a replacement for the image if the user disables or cannot see images. An image’s alt text should be succinct, accurate, and only added to images that convey information or content.”

Read more on alt text best practices.

We can easily add alt text to an image in Word by using the method below:

  1. Right-click each image and select ‘Format Object’
  2. Select Format object

  3. Select the ‘Alt Text’ tab and type in your alternative text
  4. Type in the alt text

  5. Click the OK button
  6. Repeat for each image

Now that we are satisfied with the layout and have added alt text for each of the images, we’ll go back into PowerPoint and publish the narration to an MP3 by using the ‘Publish to Podcast’ feature. After that, we’ll come back into the Word document and add a link to the MP3 file.

Publish Presentation to an MP3 Podcast

You can publish your project narration to a Podcast by using the following method:

  1. Click on the Articulate menu > Publish
  2. Select the Podcast tab
  3. Select the Podcast tab in Presenter

  4. Click on the Publish button

Once the MP3 file has been saved, you’ll need to upload the file to your server so that you can provide a direct hyperlink from the HTML page to the MP3 file.

Create a Hyperlink within Word to the MP3 File

Now, we’ll add the hyperlink to the MP3 file in Word by using the method below:

  1. Type the text that you want to use for the link. For this example, we’ll use the following:
  2. To download an audio narration of this presentation, click here.

  3. Highlight, right click the text, and choose Hyperlink
  4. Hyperlink to the audio file

  5. In the Insert Hyperlink window, type in the location of the MP3 file in the Address section and click the OK button.

    Insert address of the hyperlink

After inserting the hyperlink, notice that the text has changed to a blue font indicating that a hyperlink is now associated with that text.

Download narration image

Providing Software to Play the Audio File in MP3 Format

Whether you are linking to a Word document, PDF file, or an MP3 file, you must always provide a link to software that will enable the user to utilize the file. In this example, we are linking to an MP3 file. Therefore, we will create a hyperlink that links to the Windows Media Player.

  1. Type the text that you want to use for the link. For this example, we’ll use the following:
  2. If you experience problems with the audio file in MP3 format, please download Windows Media Player 11.

  3. Highlight, right-click the text, and choose Hyperlink
  4. In the Insert Hyperlink window, type in the location of the software file in the Address section and click the OK button. For this example, we’ll use the following:
  5. http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx

After inserting the hyperlink, you will once again notice that the text has changed to a blue font indicating that a hyperlink is now associated with that text.

Image depicting the hyperlinked text in Word to the media player

Providing Software for Other File Types

Keep in mind that you should follow the process above for each media type that you wish to include. Here are a few examples of file formats and the text you may use to direct the end user.

Linking to Word documents:

Documents in DOC format require Microsoft Word® or Microsoft Word Viewer®. If you experience problems with DOC documents, please download Word Viewer 2003®.

Linking to PDF documents:

Documents in PDF format require the Adobe Acrobat Reader®. If you experience problems with PDF documents, please download the latest version of the Reader®.

Linking to other various file types:

If you need help accessing information in different file formats such as PDF, Word, MP3, see: Instructions for Downloading Viewers and Players.

Save the Word Document as a Web Page

The final step is actually saving the Word document as a filtered web page. Saving it as a filtered web page will remove most of the extra code added by Word. This not only prevents accessibility issues, but also makes the web page more compatible with various browsers. Use the method below to save the Word document as a filtered web page:

  1. Save the Word document as a ‘Web Page, Filtered’
  2. Save as a filtered web page

  3. After saving the file, the webpage will open within Word. Simply close Word & browse to the location that you saved the page.
  4. Upload the .htm file and the corresponding folder to your web server. Click here to see the example that we created.

By using the steps above, we have created a simple web page version of our presentation that is easily accessible and compliant.

If creating a web page version of your presentation and providing a link to the narration is not enough, we can expand upon what we’ve learned so far and also include Word versions of our Engage and Quizmaker output.

Publishing Presenter, Engage and Quizmaker to Word

Word documents are easily read by screen readers and are easier to navigate for visually impaired users. By publishing your Presenter presentation, Engage interaction or your Quizmaker quiz to Word, you can provide your end-user with a comparable version of the output. Being that the steps are the same in all of the programs, we’ll walk through the steps in Quizmaker:

  1. Open your quiz in Quizmaker ‘09
  2. Click on the Publish button and choose Full quiz details
  3. In Quizmaker, click Publish and select Full quiz details

  4. Click the Publish button

After creating the Word version of your quiz or other content, you can upload it to your server and add a hyperlink to the previously created web page. This will allow the end-user to either view the content online or offline at his discretion.

Advanced Section 508 Compliance — Editing the player.html File

You can also add hyperlinks directly to your player.html file that is created when you publish a project to the web from Presenter ‘09. This will allow you to link to the Word documents or the web page that you just created. To link to the web page that we just created, use the following method:

  1. Publish your content to the web from Articulate Presenter ‘09
  2. Open the player.html file in a text editor like Notepad
  3. Edit in Notepad

  4. Scroll to the very bottom of the document and insert a hyperlink below the </div> tag and above the </body> tag. The text should look similar to this:
  5. <a href=”http://www.yourservername.com/Section508Compliance.htm”>To view an accessible alternative, click here.</a>

  6. Add hyperlinks for the rest of the content. You can either link directly to a web page that contains Section 508 Compliant material or link to your published Word documents.

Click here to view an example of an edited player.html file.

(Note: You will need to scroll down to see the link.)

Summary

By publishing your project to a web page, you have an unlimited amount of control over the content and the accessibility. You can change the size of the images, adjust the layout of the slides, and even add alternate tags to the images. Alternatively, you can publish your content to Word from within each program. No matter which method you choose, you will be able to provide comparable alternate content to all of your users and clients in a functional format that is highly usable.

Note: This article provides guidance on how to create a Section 508 compliant course. However, full compliance of Section 508 will vary by organization. Thus, additional steps beyond what this article provides may be necessary (e.g., accounting for video captioning, interactive scenarios, etc.).

Refer to the following links for more information on Section 508:

9 Responses to “Here’s How to Achieve Rapid Section 508 Compliance

This solution will not pass government 508 compliance testing any longer unfortunately. Section 508 compliance testing requires a product be equivalent and not just a test / audio dump. At the Veteran’s Administration their testing office is close to requiring that vendors not build alternatives to enhanced interactive courses in this manner at all. The course itself has to be compliant, the bottom line being, Articulate needs to get it’s act together and work with groups like the VA to get their tool compliant or their customers won’t be able to compete for government e-learning contracts.

Steve McDonald  |  Posted at 09:38 am on August 24th, 2009 |  #

Hi Steve,

I apologize for the inconvenience. However, Section 508 Compliance has been interpreted in a number of different ways. There are some people who believe that simply providing an alternate version of the same content is adequate, while others insist that the original course must be compliant. Due to limitations in Flash itself, it is nearly impossible to create Flash-based output that is fully Section 508 compliant. One reason for this is due to the inability to add any alternate tags to the images.

Another item that must be considered is the end-user experience. According to webaim.com (Section 508 Expert and Guru), “By its very nature, Flash content does not lend itself to screen reader accessibility. Flash content is time-based and often changes over time. HTML content is more or less static. The static nature of HTML allows a screen reader to access the HTML content in a linear fashion. When a visual user accesses a Flash movie, he or she visually scans the contents of the movie and focuses directly on the important content or functionality. A screen reader user cannot “scan” through Flash content and can only access it in a linear manner and in the order the Flash developer has chosen to present it. Flash’s timeline and programming language (ActionScript) allow constantly changing, dynamic, updating objects to animate, move, disappear, or duplicate themselves whenever the Flash developer chooses (or even randomly if they want). Because Flash content is usually constantly changing, this limits the ability of the screen reader to read the content in a sufficient or timely manner.”

Thus, by providing an HTML alternate, you essentially make your content not only more accessible, but also more useable for more people.

Keep in mind that full compliance of Section 508 will vary by organization. Additional steps beyond what this article provides may be necessary (e.g., accounting for video captioning, interactive scenarios, etc.).

Thank you for your comments,

Brian Batt  |  Posted at 04:29 pm on August 24th, 2009 |  #

Hey Brian,

You are partly correct. Here is how flash 508 compliance works with Flash…

First,currently Microsoft browsers are out in the lead as far as working with Adobe Flash to provide accessibility information to assistive technology like screen readers. For that reason (and since only the government content at this point is mandated to comply with 508 AND the government browser standard is IE) I will only address 508 compliance as far as Flash+IE is concerned. So what I am about to say is true for anyone who is building content for the government.

Having stated that, you can ascribe Name (which is like ALT), Description, tab order value to content in flash which can be read by assistive technology. The way this works would be…

Images are loaded into MovieClips in flash. Those MovieClips are assigned Name, Description, tab order and shortcut values. (You can also pull non-content aesthetic items out of the tab order and screen reader view.)

As the reader tabs to a MovieClip within a Flash movie (a SWF) Flash places a subtle highlighting box around the selected region (the image that IS the MovieClip) and reads the Name value.

If you have a looping animation on the screen you can provide assistive ALT value via the name attribute of an associated MovieClip but pull the looping animation out of the scren reader view.

AS for scanning… if you are a non-sighted person, then you likely have your screen reader turned up full speed and are tabbing through the interface reading in a linear manner ON an HTML page. Tabbing through an accessible Flash movie is no different.

The government is getting quite verbal about not passing “508 compliant” courses that provide an unequal experience. I was on a phone call with a government 508 testing office last week discussing how to create drag and drops that work for sighted and non-sighted individuals (and it is worth mentioning that we had both sighted and non-sighted government 508 experts on the phone including Flash development experts.)

For the record, these features have existed in the Flash platform since version 7 of the flash player. As of Flash 9 (which is now, what… two years old) it is even easier and more improved.

Outside of the theoretical ways that 508 could be translated, the government is actually testing 508 rigorously. This has been going on for a bit more than a year now and is intensifying. And they perform both automated testing as well as human analysis on the quality of the 508. As an e-learning producer I have watched courses come back because of the quality of ALT-style descriptions not being descriptive enough (not just THAT they exist.)

So you are correct that Flash isn’t 100% compliant in that it doesn’t pull it off equally across browsers, but that is a browser problem and not a Flash problem for the reasons I’ve mentioned about. If you follow what I have said above, then Flash will pass section 508 compliance 100% of the time.

I think it is time to put pressure back on the mothership (at Articulate) to get with the times or be left behind. If Articulate could allow the course author to add the assistive information as they built the course, I see no reason why Articulate couldn’t author 508 compliant e-learning. Anything else is just an excuse at this point.

Steve McDonald  |  Posted at 09:22 am on August 25th, 2009 |  #

We need key strokes to control the Articulate player.

We are trying to make our Articulate presentation available to someone using JAWS. I watched and listed as he tried to access the presentation – and boy my eyes were opened! He tabs through the page and is told he is on button 154, and button 175 and button 412 etc. . . (all this information is coming in as the notes are being read). No names or labels. He couldn’t identify the Pause button or Next Slide button that are part of the Articulate player. JAWS is identifying the button ‘labels’ but they aren’t the same from screen to screen. After a number of tries he found Pause to be button 167… but the next screen it was button number 47.

The Word dump worked well – but I am not going to waste time on the Alt Text. “A picture is worth a thousand words” meant a lot more to me after ‘watching’ what he see. A simple description in the Alt Text field doesn’t do it for him. He needs the words and meaning of the picture but if I type in a good description it makes it even more confusing because the narration is happening as JAWS is moving across the screen. He gets both the Alt Text and the narration at the same time.

Key strokes to control the player are what we need at this moment. Do you know the keystrokes for Pause, Next Slide and Exit? These are good ones to start with.

Thank you for any help!

Darla Woodworth

Darla Woodworth  |  Posted at 01:40 pm on October 20th, 2009 |  #

Hi Darla,

When I started writing this Section 508 article, I downloaded several screen readers including JAWS and tried to simulate the experience as best as possible. You’re exactly right when you say that it’s an eye-opening experience.

For the entire list of player controls, you can check out this page:

http://www.articulate.com/support/presenter09/?p=31

Here’s a few of the shortcuts:

Arrow Left, Arrow Up, or Page Up: Play Previous Slide
Arrow Right, Arrow Down, or Page Down: Play Next Slide
Home key: Play First Slide
End key: Play Last Slide
Spacebar: Play/Pause

Brian Batt  |  Posted at 02:25 pm on October 20th, 2009 |  #

Very nice! Spacebar.. That one key will help a lot!

Darla Woodworth  |  Posted at 02:36 pm on October 20th, 2009 |  #

Brian Batt,

I shared your information with my Brian (JAWS user and other apps) and he wrote back to me . .

Darla,

My question for the gentleman that downloaded JAWS or Window Eyes: How well acquainted did he get with either program?

I am not being sarcastic in asking the question. It takes a lot of time to become familiar with the basics. He really would have to be blind folded, use JAWS and learn to “feel” his way around the screen. Using JAWS isn’t simply a matter of listening but navigating. Screens are all laid out differently and the key strokes to move around are not something learned in a few minutes. After all there is the JAWS cursor, PC cursor, invisible cursor just to start with. Then there is insert key combinations to read and navigate around the screens.

I have taught others how to use JAWS and it doesn’t happen immediately. After all, I can’t cheat and peek. I can either locate the information or I can’t. Necessity becomes the best teacher!

I am happy to offer myself as a beta tester for Articulate. Anything I can do to improve access is to my own benefit!

Brian
____________________

So, if you need a tester Brian has volunteered!

Darla Woodworth  |  Posted at 03:30 pm on October 20th, 2009 |  #

Super article! I do have one suggestion though. I found it interesting that in an article on accessibility, you used the phrase “click here” as follows: “Click here for more information on alt text best practices.” I would suggest changing this to read “Read more on alt text best practices” where “alt text best practices” is your link. This will improve the scannability of your page and also provides a meaningful link to user agents that list all the links on the page. Still…very glad to see this article here. Thanks and keep it up!

jhewitt  |  Posted at 03:16 pm on November 23rd, 2009 |  #

Hi JHEWITT,

Thanks for the feedback on the article.

You’re exactly right on that link! One of the things that I tried to do was to make this article as Section 508 compliant as I possibly could and I overlooked that text. Thanks for pointing it out. It’s now corrected!

By the way, are there any other articles that you would like to see written?

Brian Batt  |  Posted at 05:26 pm on November 23rd, 2009 |  #

Leave your comment below.




Want more? Check out 497 Entries in the Archives »