HiSoftware White Papers - Creating Accessible Multimedia

Creating Accessible Multimedia Demos with HiSoftware AccVerify®, Hi-Caption™, Microsoft Producer for Microsoft Office PowerPoint 2003

This document is written towards an audience familiar with Microsoft PowerPoint, an understanding of or ability to learn Microsoft Producer and a general understanding of computing terminology and concepts needed to make a web page accessible.

Creating accessible multimedia has been a challenge for authors striving to meet the federal government Section 508 regulation, or the W3C WCAG 1.0 standards. Using Microsoft Producer, along with HiSoftware AccVerify® and Hi-Caption™ and some hand modifications, a captioned multimedia presentation can be made.

The instructions below will give general overviews of some concepts and will then get very specific for other more detailed steps.

Steps to Create the Accessible Presentation

Create the PowerPoint Presentation.

1. Create the PowerPoint 2002 presentation (PPT) as you normally would.

2. Make sure to add alt text into the images and objects in the PPT file. Right click on the image in PowerPoint | Select Properties from the popup menu and add appropriate alternate text to the Web tab in the picture or object properties. Please refer to the picture below.

Link to larger format picture image of PowerPoint Alt Text

3. Save the PowerPoint file.

4. Also save the PowerPoint file as an RTF (for later captioning) Use the Save As feature in PowerPoint and select the correct Save as Type filter.

Create the Producer Project

1. Open Microsoft Producer and create default project or use the wizard.

2. Choose a template of standard audio and resizable slides, or another template that meets your needs.

3. Import the PPT presentation file to the Producer Project. Use the import feature in Producer. The slides will appear in the tree view of Producer.

4. Outside of Producer, create a script of the narration of the slides. Use the RTF file that you saved from PowerPoint above to assist you. Create it so that it can be read easily, because you will be multitasking later. This is the script that you or someone on your team will be recording to be played with the presentation. Rehearse this a few times to get familiar with it.

5. In Producer, select Capture from the Tools menu and select Narrate Slides with Audio.

Link to larger format picture of Producer Caption wizard

6. Follow wizard and narrate slides by speaking into a microphone. This sets the timing of the slides. You will press a Capture button and then speak into a microphone. Press Next to proceed to the next slide.

Link to larger format picture of Capture Wizard

7. Save capture using the Save button.

8. Publish the Producer file to dir in R:\some dir where R:\some dir is a drive and directory that you have created to store your project. Use the Publish Presentation feature from the File menu in Producer.

Create the SAMI captioning file using Hi-Caption

1. Create the SAMI captioning file by using Hi-Caption. This is the file that contains the captioning text that will be displayed. The file name should match the WMV or WMA media file created by Producer. If more than one media file exists, copy the SMI for each name. For example, mymediafile.wma matches with mymediafile.smi.

Link to larger format picture of Hi-Caption

2. In Hi-Caption, you need to create the SAMI file by playing your audio or video file from within Hi-Caption and adding the timing and captioning text. You can import a text file using the Import Wizard of Hi-Caption. You can also play the media file and step though and manually enter the captioning text.

Link to larger format picture of Hi-Caption import wizard

3. Save the captioning file as mymediafile.smi where mymediafile is the name of your media file.

Modifying the Producer Files

1. Edit default.htm in your finished Producer project to add this code below before the </body> tag. This default.htm file is located in YourFolderName\ProducerFileName\default.htm where YourFolderName is where you saved your Producer Output.

<div id=CaptionDiv align=center valign=middle
style="position:absolute;top:70%; width: 280; height:400; border:2px; background-color:000000;
display:none;WMPrerollDisplay:none">
<p align="right">

This is where the captioning will go. If you do not do this, no captioning will appear. You can modify the position settings and color if you wish.

2. Edit gogoprod.js, in your Producer file. Replace line 101 (approximate location with word wrap off) with this:

throw "No player";pWMP=null;_dB="<OBJECT classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=320 height=240 id=MediaPlayer name=MediaPlayer type=application/x-oleobject standby=\"\"><PARAM NAME=\"URL\" VALUE=\"\"><PARAM NAME=\"autoStart\" VALUE=\"0\"><PARAM NAME=\"invokeURLs\" VALUE=\"0\"><PARAM NAME=\"baseURL\" VALUE=\"\"><PARAM NAME=\"volume\" VALUE=\"100\"><PARAM NAME=\"mute\" VALUE=\"0\"><PARAM NAME=\"uiMode\" VALUE=\"none\"><PARAM NAME=\"enabled\" VALUE=\"-1\"><PARAM NAME=\"enableContextMenu\" VALUE=\"-1\"><PARAM NAME=\"captioningID\"VALUE=\"CaptionDiv\"></OBJECT>";MediaPlayerDiv.innerHTML+=_dB;}catch(e)

This tells the presentation to show the captioning. This replacement adds <PARAM NAME=\"captioningID\"VALUE=\"CaptionDiv\"> to the existing line.

3. You will now need to modify your template file from Producer to move the table of contents of the presentation higher up so the captioning text does not cover it up. Locate a file called %template%.css where %template% is the name of the Producer template file that you used in your presentation. Example: audio slides - proportional resize2.css. Edit this file in Notepad® or similar and locate the section for #TOCDiv. Modify the value for WMAlignBottom changing the value from 19 or so to something larger like 200 or 220. This will shorten the table of contents so it is not covered by the captioning. You have to experiment here to get one that matches your captioning.

Making the Presentation Accessible

1. Add the appropriate noscript text to the HTML PowerPoint slides in the Producer output files using HiSoftware AccVerify. For example, for each HTML file, give a table of contents. This can be time consuming if your have 100 slides, but it is necessary for accessibility. It may be best to make the table of contents before and then paste it into the noscript text field in AccVerify’s repair wizard. This could also be done by hand.

For example, if you have three HTML slides in your output, you will want a NOSCRIPT text such as

<noscript>
This presentation uses JavaScript for Navigation. If you do not support JavaScript, these links below will provide you with locations of the slides in the presentation and links to the media files and the captioning file.
<p>
<a href=”SomeMediaFile.SMI”>Captioning File for my presentation</a>
<a href=”SomeMediaFile.wmv”>Media File for my presentation</a>
<p>
The Slides of the PowerPoint Presentation<br>
<p><a href="#EndOfPPT">Skip PowerPoint Slide Listing</a></p>
<a href=”Slide0001.htm”>First slide of the presentation</a>
<a href=”Slide0002.htm”>Second slide of the presentation</a>
<a href=”Slide0003.htm”>Third slide of the presentation</a>
etc
<a name="EndOfPPT"></a>

Add other content here if you have text transcripts of other information that may assist users.
</noscript>

If using AccVerify, omit the <noscript> and </noscript> tags as the repair utility will add them for you. Since there will be a PowerPoint Index file and a directory below containing all the slide files, the targets of the hyperlinks may change if you are using relative links (as the example above does).

Link for larger format picture of the noscript wizard

2. Fix the alt text errors in default.htm using AccVerify or by hand coding HTML. Every IMG tag must have an ALT tag and that alt tag should provide an appropriate description.

3. Upload the Producer content to web. You can either publish directory from Producer or upload the folder containing your presentation to the web using a program such as Microsoft® FrontPage®.

4. Test for accessibility using HiSoftware AccVerify, and then test from web. Test to make sure captioning appears and that the presentation is acceptable. Please note the Windows Media Player™ on your or your clients systems may not have captioning enabled by default. Please see the Windows Media Player help for information on displaying captioning.

5. Create an entry page on your web with links to your producer presentation, where a user may download Internet Explorer®, Windows Media Player®, the media file for your presentation and the transcript.
For example: http://www.hisoftware.com/support/mm-demos.htm

References
HiSoftware web site:
http://www.hisoftware.com

HiSoftware AccVerify and Hi-Caption:
http://www.hisoftware.com/access/index.html

Microsoft Windows Media Site http://www.microsoft.com/windows/windowsmedia/default.asp

Microsoft Producer
http://www.microsoft.com/office/powerpoint/producer/

Producer Tips
http://www.producertips.com

MSDN Pages describing SAMI
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnacc/html/atg_samiarticle.asp

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwmt/html/wmp7_sami.asp

Appendix
Below is an example of the SMI File

<SAMI>
<HEAD>
<Copyright="2002 HiSoftware, Inc.">
<Title>Making Web Pages Accessible
Using HiSoftware AccVerify 2002 with AccRepair for Microsoft FrontPage</Title>

<STYLE TYPE="text/css">

</Style>

</head>

<BODY>

<SYNC Start = 500>
<P Class = ENUSCC ID = Source>Narrator
<P Class = ENUSCC>Making Web Pages Accessible using
HiSoftware AccVerify 2002 with AccRepair for Microsoft FrontPage.

<SYNC Start = 11000>
<P Class = ENUSCC ID = Source>Narrator
<P Class = ENUSCC>Example Files
This demonstration uses copies of files located on the HiSoftware web site.
These files are located at: http://www.hisoftware.com/uaccess/
</BODY>
</SAMI>