Webstandards, Accessibility and Usability at Penn State

This Page

1. General Plug In Tools
2. Microsoft Word Tips
3. PowerPoint Tips
4. Excel Tips
5. Adding Image Alt Tags (Windows Only)
6. Cautions on Converting Word and Excel to HTML

General Plug In Tools

1. Make sure your audience has ready access to Microsoft Office packages, and for the version you are using. Although these are readily available at Penn State, they may not be available outside of Penn State; another option like PDF or pure HTML may be better in these situations.

   SECTION 508 - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with § 1194.21(a) through (l).

Microsoft Word Tips

1. Use the built in Header style tags (e.g. Header 1, Header 2, Header 3) in Word as you would H1,H2,H3 tags in an HTML file. These headers may be preserved and interpreted in screen readers when files are converted to PDF or other formats. The Format » Style menu allows users to adjust the appearance of these tags in a Word file.

2. Provide labels and captions for all images and charts.

3. In some HTML editors like Dreamweaver 2004, Header styles are converted to H tags when the text from Word is copied and pasted into Dreamweaver.
   Note: Avoid "Paste as Formatted" in Dreamweaver, since it will copy extra style tags.

4. Avoid using the "Save as Web file" option to convert Word and Excel files to HTML. Even in filtered mode, the code tends to be very clunky and may be inaccessible depending on how the original file was formatted (see inaccessible example below). It's better to convert the file into a PDF or cut and paste raw text into an HTML editor andreformat the content more accessibly.

Power Point

1. Always add labels to images and include extended text descriptions for graphics and charts as needed. Audio and video files should include captions or transcripts.

2. Use a color scheme which provides enough contrast of text versus background, yet is not too overpowering. See the color page for more information.

3. Use sans-serif fonts which are designed for both projectors and online viewing.

4. Give a title to every slide and make sure the title is entered into the designated title area (usually at the top). This generates a table of contents for the screen reader (in both Power Point and in the HTML version).

5. If you use the Chart Wizard, make sure the color formatting is accessible. See details below in the Excel section.

6. Screen readers may have difficulty processing Power Point files. If Power Point files are posted online, use the Save as Web Page option. Users of Office for Windows can also add ALT tags for images. Mac Office users should make sure all images are described in the text (i.e. a caption) in the slides.
   Note: You can also purchase a plug in to audit the accessibility of the output file (Windows only).

7. If you convert PowerPoint files to an HTML file on a Macintosh, then you will need to manually insert the ALT text for all images. PowerPoint files are published in its own folder and could be edited by an HTML editor such as Dreamweaver.

8. If you use Adone Presenter with a PowerPoint file to create a recorded presentation, make sure that images are tagged and minimize transitions. Text transcriptions are also necessary for audio content. See information at http://www.connectusers.com/tutorials/2007/09/accessible/index.php

Excel

1. Avoid converting files from Excel to HTML since inaccessible tagging may be added. See the Word HTML for a discussion of similar issues. It may be better to upload the Excel file itself or convert it into a tab delimited or comma delimited file.

2. Make sure headers and rows are labeled as in a data table.

3. If you are using the Chart Wizard
   
   1. Use the formatting options in line charts to create different types of dotted lines to facilitate legibility for color blind users.
   2. Avoid using the yellow and bright teal lines; use formatting options to change it to a darker color.
   3. Ensure that charts are legible are grayscale (black and white).
   Add a text key for bar charts or change the default colors to a color safe palette.

Adding Image Alt Tags (Windows Only)

The Windows version of Microsoft Office allows you to insert ALT tags to inserted images which can be read by a screen reader. If these files are converted to HTML, the ALT tag is generally preserved.

Note: This tool is not available in Office 2004 or Office 2008 for Macintosh.

Microsoft Office 2007

In Microsoft Office 2007, the Alt Tag tool is under the Picture Size options. In Office 2003, it is under the Format Picture options.

1. Open any Microsoft Office software and select an image so that square anchors are visible.
2. Right click the mouse and select Size.
   
3. In the Size window, select the Alt Text tab on the right, then fill in a description of the image. Click Close to finalize alt text.
   Note: If the tab is not available, make sure you have not selected the Format Picture option.
   
   
   

Microsoft Office 2003

In Office 2003, it is under the Format Picture options.

1. Open any Microsoft Office software and select an image so that square anchors are visible.
2. Right click the mouse and select Format Picture.
3. In the Format Picture window, select the Web tab on the right, then fill in the Alternative Text content. Click OK to close.
   Note: This tab is not available in Office for Macintosh.
   

Cautions on Converting Word and Excel to HTML

Although Microsoft products include a function to convert content to HTML, the implementation is not regarded as standards compliant. Below is a sample of what codes are generated by the Save as Web file option in Microsoft Word.

If need convert to HTML, you can look for the Filtered Web option (available in Office 2007 for Windows only) or you can purchase a plug in to audit the accessibility of the output file (Windows only).

Accessibility Issues of Word Generated HTML

Note: Some text editors such as Global Writer export HTML with less embedded formatting.

1. Styles use fixed font sizes, not relative font sizes. Zoom will be disabled in Internet Explorer 6 and earlier versions.

2. Will probably fix the font to Times New Roman which is designed for print, not for computer monitors.

3. Style sheets are embedded and are time consuming to remove manually. In fact, all Word styles in your template are exported even if they are not used in the original document.

4. Word HTML allows designers to specify for unusual fonts or symbols which may not be available on all computers.

5. If Smart Quotes are turned on, then they will be converted to a Unicode numeric character or left intact. Older browsers may not be able to decipher these symbols.

Top of Page

Microsoft Office Accessibility Links

• WebAim PowerPoint Accessibility
• WebAim Word Accessibility
• www.virtual508.com - Microsoft Office to HTML Wizard based on that developed by the University of Illinois.

Top of Page