Web Accessible Formatting in Microsoft Word

For PDF version of this resource click on FormatWord4Win.pdf.

Microsoft Word can be used to create web pages, however the web pages it creates can be difficult for those with disabilities and the most bloated in code and file size you may run across. Once you know how, in combination with a Tidy capable application, you can create trimmer and more web accessible web pages.

This tutorial will teach you how to add an ALT tag to your images, format your documents using Microsoft‘s little used but provided styles, and save to web page format.

Adding Alternative Text to Images

One of the biggest challenges to those with visual disabilities are images. It is important to add alternative text. This alternative text will be read aloud for screen reader users and depending on browsers and browser settings will be displayed as a tool tip when the mouse is positioned over it. Microsoft Word provides a method of adding alternative text and saves you from having to learn how to do it within the HTML code.

Step 1: Right Click
  1. Right click on the image. A drop-down menu is displayed.
  2. Select Format Picture... .
Step 2: Format Picture - Web
  1. Click the Web tab.
  2. In the “Alternative text” input field, type the text you would like the screen reader to read aloud to the user. NOTE: Alternative text should be a maximum of 256 characters or you should be using a LONGDESC tag.
  3. Click OK.

Using Microsoft Styles

To make the most of Microsoft’s Styles and Formatting option for accessible output you need to ignore font and size formatting option and use “semantic”, or logical, formatting.

If you want to provide your document in .doc, .pdf, and as a web page you may want styling to look different in the Word document then in the default styles Microsoft provides. You can edit the styles and they will be retained within the document. Do not revert back to the less accessible method.

Step 3: Learn to Ignore

Ignore the area of the formatting menu that displays the font and size.

Step 4: Styles and Formatting
  1. From Microsoft’s menu, click Format. A drop-down menu is displayed.
  2. Select Styles and Formatting... . The “Styles and Formatting” area is displayed on the right.
Step 5: Show Styles

Generally, the “Pick formatting to apply” area is empty. You have to show what is available.

  1. In the lower right corner, click the Show: drop-down menu. NOTE: If you have maximized the Microsoft Word window it will display above rather than below.
  2. Select All styles.
Step 6: Apply Formatting
  1. Highlight the text to be formatted and select how it is to be formatted from the Pick formatting to apply area on the right.
  2. Repeat this procedure for all text you wish to format.

NOTE: You will find styles for things such as:

  • 9 levels of headings
  • Header
  • Footer
  • HTML Acronym
  • Block Text, and etc.

Not all styles are semantic for the web, but many are so it is worth seeing what is available. For example, on the web there are only 6 heading levels.

NOTE: Thanks to a Tidy option you can continue to use B for Bold and I for Italics (not illustrated). For lists go to Step 7.

Step 7: Lists
  1. Highlight the list text and click the Bullets list icon. NOTE: When you move your mouse over the icon a tool tip is displayed. If you wanted a numbered list click the Numbers list icon.
  2. If your list is more detailed go to step 8, otherwise proceed to Saving Your Document.
Step 8: Increase Indent

You can create a multi-level lists.

  1. Highlight the appropriate list text and click the Increase Indent icon.
  2. Repeat this step for as many levels as necessary. NOTE: When you move your mouse over the icon a tool tip is displayed. Although it is not illustrated here, there is a Decrease Indent icon.

Saving Your Document

There are three options for saving your Microsoft Word document as a web page. We will demonstrate the most efficient option; Web Page, Filtered.

NOTE: Currently, “Single File Web Page (*.mht; *.mhtml)” will not display properly in Blackboard Vista so it should not be used.

Step 9: Save as Web Page
  1. From Microsoft’s menu, click File. A drop-down menu is displayed.
  2. Select Save as Web Page.... The “Save As” dialog box is displayed.
Step 10: Save As
  1. Locate the destination folder.
  2. Type a file name. You can choose to keep the original name because the extension will be different. Our illustration shows StyledWithStylesMenu.htm.
  3. From the “Save as type” drop-down list, Select Web Page, Filtered (*.htm; *.html). NOTE: Depending on your computer settings you may not see the extensions, or the (*.htm; *.html), part of the selection.
  4. Click Save.
Step 11: Warning
  1. Click Yes.
Page Maintained By: ctl@uncc.edu