Tutorial: Preparing for Conversion to HTML and PDF (Full Document)


  1. Purpose
  2. Technical Requirements
  3. Useful Keyboard Shortcuts
  4. Open the Working Document
  5. Use Outline View to Organize and Apply Styles
    1. About Outline View
    2. About Headings and Styles
    3. Creating the Level 1 Heading
    4. Creating the Level 2 Headings
    5. Creating the Level 3 Headings
    6. Creating the Level 4 Headings
    7. Creating a Bulleted List
    8. Collapsing and Expanding the Outline
    9. Updating the Working Document
  6. The Image
    1. Adding Alternative Text to the Image
    2. How to Describe an Image
  7. The Chart
    1. Adding Alternative Text to the Chart
    2. Formatting the Legend
    3. Formatting the Data Series
    4. Adding a Caption
  8. The Table
    1. Specifying a Table Heading
    2. Adding a Table Caption
  9. Document "Title" and Other Metadata
    1. Adding Metadata
    2. Removing Personal Information
  10. Create a Table of Contents
  11. Preserve the Contents of Headers and Footers
  12. Convert to HTML
    1. Choosing a File Format
    2. Saving as Web Page
    3. Cleaning up the HTML code
      1. Using Adobe Dreamweaver
      2. Using HTML Tidy
    4. Viewing the Final Document
    5. Validating Code
  13. Convert to PDF
    1. Checking Settings for PDF Bookmarks
    2. Converting to PDF
    3. Checking Your PDF
      1. Metadata
      3. Overall Accessibility
  14. Wrapping-Up
  15. References
  16. Feedback


Note: this tutorial was written for Word 2003 and has not been updated.

The following tutorial proposes several “best practices” for increasing the accessibility and usability of Microsoft Word documents—and, ultimately, the HTML and PDF files created from them. By practicing these “universal design” techniques, your documents will become better organized, more navigable, and accessible to a larger audience.

Following the steps of this tutorial, you will modify a “working document” to make it more accessible by adding structural headings, lists, alternative text descriptions of visual information, table headings, captions, metadata, and a navigable table of contents.

Technical Requirements

This tutorial requires Microsoft Word 2003. Depending on the document format you plan to convert to, you will also need one or more of the following:

If converting to HTML

  • A web browser (preferably the current version of Mozilla Firefox or Microsoft Internet Explorer)
  • Adobe Dreamweaver version 8 or higher (optional)

If converting to PDF

  • Adobe Acrobat (Standard or Professional) version 7 or higher.

Most of the steps which follow apply equally to HTML and PDF conversion. Differences will be clearly noted.

Useful Keyboard Shortcuts

The following keyboard shortcuts are provided to help you navigate Word documents with greater speed and efficiency. They offer an important reminder that some people, either by preference or necessity, navigate the computer without using the mouse.

Useful Keyboard Shortcuts for Microsoft Word
Key Combination Effect
Ctrl+Home Go to beginning of document
Ctrl+X Cut
Ctrl+C Copy
Ctrl+V Paste
Ctrl+A Select All
Ctrl+Shift+S Apply style
Ctrl+Shift+Right Arrow/Left Arrow Select entire next/previous word
Ctrl+F Find
Ctrl+H Find and Replace (“Hunt”)
Ctrl+Alt+Heading Number Apply heading level for heading levels 1–3
Ctrl+Shift+N Apply the Normal style
Alt+Ctrl+N Normal view
Alt+Ctrl+O Outline view
Alt+Ctrl+P Print view
Alt+Shift+Arrow keys Move (in all views)
Tab/Shift+Tab Demote/Promote in outline view
Shift+F10 Invoke context menu (same as right-click)

For more keyboard shortcuts (and there are a lot of them!), see Microsoft’s List of keyboard shortcuts for Word 2002, Word 2003, and Word 2007 (http://support.microsoft.com/kb/290938).

Open the Working Document

Before you begin the tutorial, you should open one of the working documents. Choose Working Document #1 if you wish to complete all of the lessons in the tutorial. If you wish to skip the first exercise, which describes using outline view to organize and apply styles, choose Working Document #2.

If you chose Working Document #2, skip ahead to Section 4, “The Image: Formatting for Accessibility.

Use Outline View to Organize and Apply Styles

About Outline View

Outline view provides a convenient way to assign text to one of nine heading levels. Once your document contains headings, you can easily reorganize it by dragging headings (and all of the information subsumed under them) to new locations in the outline. The amount of information moved in this way can be as small as a sentence, or as large as a book chapter (See “About viewing a document as an outline” in the Microsoft Word 2003 Help documentation for more information).

When you open outline view, a new set of tools appears on the menu bar (see Figure 1 below). The buttons allow you to promote or demote headings (move left and right), reorder headings (move up and down), expand and collapse the outline in various ways, and show/reveal text formatting.

Figure 1

Figure 1:  Word’s outline toolbar

About Headings and Styles

Word’s headings are assigned through the application of “styles.” Styles are typically thought of as a part of visual formatting, but they can also impart structural organization. Document structure, in the form of headings, paragraphs, and lists, is an essential component of accessibility.

Word allows full customization of each style, including the nine levels of headings. Text attributes such as font, size, paragraph indents, tabs, color, and more can be modified to suit every requirement. So, if you don’t like the default appearance of Word’s headings, you can easily change them.

For more information about modifying styles, refer to the Microsoft Word help documentation.

Creating the Level 1 Heading

Let’s begin the tutorial by adding headings and subheadings to the working document to create some organizational structure.

To apply the Heading 1 style, make sure you have Working Document #1 open, then follow these steps:

  1. Switch to outline view: View > Outline (Alt+Ctrl+O).
  2. Place the cursor in the first sentence that reads: “Example of Organization with Styles: Heading 1 is the Top Level of a Structured Document.”
  3. Click the “Promote to Heading 1” button on the outline toolbar (or use the keyboard command Shift+Tab). Text will be assigned a style of Heading 1, and will show as Level 1 in the outline (see Figure 2).
  4. To see what heading styles will look like, click the “Show Formatting” button on the outline toolbar.
Figure 2

Figure 2:  Heading Level 1

Assign the Heading 1 style to the first line of text.

Creating the Level 2 Headings

To apply the Heading 2 style, follow these steps:

  1. Place your cursor anywhere within the first line that reads “Heading 2...”.
  2. Click the “demote” button or press the Tab key. Note that after assigning the first Heading 2, subsequent level 2 headings will need to be moved back to the left using the “promote” button(Shift+Tab).
  3. For each remaining Heading 2, move the cursor to that line of text and click the “promote” button (Shift+Tab) to apply the level 2 heading style (see Figure 3).
Figure 3

Figure 3:  Assign the “Heading 2” style

Creating the Level 3 Headings

To apply the Heading 3 style, follow these steps:

  1. Place your cursor anywhere within the first line that reads “Heading 3:...”.
  2. Click the “demote” button (Tab key) to assign the Heading 3 style. Like the level 2 headings, subsequent level 3 headings will need to be moved back to the left using the “promote”button (Shift+Tab).
  3. For each remaining Heading 3, move the cursor to that line of text and click the “promote” button (Shift+Tab) to apply the level 3 heading style (see Figure 4).
Figure 4

Figure 4:  Assign the “Heading 3” style

Creating the Level 4 Headings

To apply the Heading 4 style, follow these steps:

  1. Place your cursor anywhere in the first line that reads “Heading 4:...”
  2. Click the “demote” button (Tab key) to assign the Heading 4 style.
  3. Move the cursor to the second Heading 4 and click the “promote” button (Shift+Tab) to apply the level 4 heading style (see Figure 5).
  4. Save your document (Ctrl+S).
Figure 5

Figure 5:  Assign the “Heading 4” style

Creating a Bulleted List

Lists, both bulleted and numbered, comprise another important structural category in electronic documents. A list structure works like an outline to organize information. Lists in Word transfer well to both HTML and PDF.

To assign the List Bullet style to the list of points under the second Heading 2, follow these steps:

  1. Open the Task Pane for Styles and Formatting: Choose Format > Styles and Formatting, or click the Styles and Formatting button on the toolbar.
  2. From the drop-down list labeled “Show,” choose “Available Formatting” (see Figure 6).
  3. Select all four points under the second Heading 2.
  4. With the text selected, choose “List Bullet” from the list of styles in the Task Pane (see Figure 7).
Figure 6

Figure 6:  List of Available Styles

Change the view of styles to “Available Formatting.”

Figure 7

Figure 7:  List Bullet Style

Apply the “List Bullet” style to the three bullet points.

Collapsing and Expanding the Outline

To see the power of Word’s outline tools, change the “show level” settings to “Show Level 4” (See Figure 8). You should see each of the document’s headings, but not the supporting paragraphs, chart, or table. Experiment by changing the view to level 3, then to level 2. You can also collapse and expand headings by double-clicking on the plus and minus signs to the left of each heading.

More information about this topic For more information about Word’s headings and styles, see Organize and Add Style in the module Microsoft Word 2003, Universally Designed.

Figure 8

Figure 8:  Show Outline Levels

Experiment with the “Show Level” menu to collapse or expand the outline.

Updating the Working Document

To synchronize your work with users who may have skipped the previous section about using outline view to organize and apply styles, it is recommended that you open Working Document #2 to complete the following lessons.

  1. Open Working Document #2

If you wish to save Working Document #1, choose File > Save As... and select a destination for the file.

The Image: Formatting for Accessibility

Now that you have added structure to the document, it’s time to add another essential component of accessibility: alternative text descriptions of images.

Alternative text is added to an image to provide a textual alternative to visual information. It is important to remember that some users won’t see your web page, they’ll hear it! Your challenge, then, is to imagine perceiving the content of your document through your audience’s ears.

Adding Alternative Text to the Image

To add an alternative text description to an image, follow these steps:

  1. Switch to Print Layout view: Choose View > Print Layout (Ctrl+Alt+P).
  2. Locate the graphic containing icons and labels for Microsoft Word, HTML, and Adobe PDF.
  3. Double-click on the image to call up the Format Picture dialog box.
    (Alternatively, you can select the image and choose Format > Picture... You can also access the “Format Picture...” dialog box by right-clicking on the image.)
  4. Click on the “Web” tab, and locate the field labeled “Alternative text” (see Figure 10-a).
  5. Enter the following description of the image: “This tutorial refers to three document formats: Microsoft Word, HTML, and Adobe PDF” (Figure 10-b).
  6. Click OK.
Figure 9

Figure 9:  An Image in Need of Alternative Text

The three document formats used in this tutorial.

Figure 10

Figure 10:  Adding Alternative Text

In the Format Picture dialog box (a), select the “Web” tab (b), and enter the alternative text description of the image.

How to Describe an Image

Alternative text should describe the meaning of an image rather than just its appearance. For example, when writing the alternative text description of a photograph of signs hanging on laboratory doors, it is important to concentrate on what the image means:

“Each laboratory has safety policies posted on the door.”

A good description will convey your intent for including the image on the page.

The Chart: Formatting for Accessibility

There are several things you can do to improve the accessibility of charts and information graphics. For example, you can:

  • Add alternative text to explain a chart’s contents when, for whatever reason, it can’t be seen by your readers.
  • Increase text size to ensure legibility.
  • Add patterns to background colors to make data more easily discernable in black and white.
  • Add a caption, which gives the chart a title and provides a text alternative to visual data.

Adding Alternative Text to the Chart

To add alternative text to the chart, follow these steps:

  1. Switch to Print Layout view (Ctrl+Alt+P) if not already in that viewing mode.
  2. Right-click on the chart and choose “Format Object...” from the context menu. The Format Object dialog box appears (see Figure 11).
  3. Click on the Web tab, and in the box labeled “Alternative Text,” enter the following: “Percent of attempted tasks completed in East, West, and North quadrants, per quarter of last year.”

Remember, the purpose of alternative text is to describe the meaning of the chart in case readers can’t see it.

Figure 11

Figure 11:  The Format Object Dialog Box

Right-click on the chart, then choose “Format Object...” from the context menu. Click on the “Web” tab and enter an alternative text description of the information conveyed visually in the chart.

Formatting the Legend

To set the text of the legend to a legible size, font, and style, follow these steps:

  1. Double-click on the chart to bring up the datasheet (see Figure 12).
  2. Position the cursor over the legend area, and double-click on the legend to bring up the Format Legend dialog box.
  3. Click on the Font tab, then select the desired size, making sure that it is easily readable. For this exercise, set the text size to 12 points (see Figure 13).
  4. Click OK.
Figure 12

Figure 12:  Edit the Data Sheet

Double-click on the chart to bring up the datasheet. This is the editing mode for both data and visual formatting.

Figure 13

Figure 13:  Format the Chart Font

Double-clicking on each part of the chart will bring up a dialog box for that element. Focus on readability when choosing text attributes (size, font, and style).

Formatting the Data Series

Note that the blue bars in the chart are a solid color, while the red and green bars contain a pattern as well as color. The patterns help readers identify each data series, even when the document is viewed or printed in black and white.

To add a pattern to the blue bars, follow these steps:

  1. With the datasheet still open, position the cursor over the tallest blue bar near the middle of the chart.
  2. Double-click on the bar. The Format Data Series dialog box will appear.
  3. Locate the “Fill Effects” button below the color tiles, and click on it. The Fill Effects dialog box will appear.
  4. Click on the “Pattern” tab.
  5. Select the “wide upward diagonal” pattern (see Figure 14).
  6. Click OK to close both dialog boxes.
Figure 14

Figure 14:  Format the Chart Patterns

Edit fill paterns by clicking on the Fill Effects button (a), and selecting a gradient, texture, pattern or picture (b). By adding patterns to fill colors, charts become readable in black and white as well as in color.

Adding a Caption

To add a caption to the chart, you must first close the datasheet. Do this by clicking in an area of the document outside of the chart.

Now, continue with the following steps:

  1. Right-click on the chart (or press Shift+F10) and choose “Caption...” from the context menu. The Caption dialog box will open (see Figure 15).
  2. Click on the “New Label...” button. This will allow you to change the default label, which is currently “Figure 1” (see Figure 16).
  3. Enter the text for a new label: “Tasks completed per quarter of last year”. The label can contain up to 40 characters and spaces.
  4. Click “OK” to close the New Label dialog box.
  5. If you wish to change the default numbering system, click on the “Numbering...” button. Note that numbers are appended to captions when the are created. The numbers are automatically incremented, so that each new “figure” is assigned a unique label.
  6. If you opened the Numbering dialog box, click OK to close it.
  7. From the “Position” menu, select “Above selected item” (see Figure 17).
  8. Click OK.
Figure 15

Figure 15:  Adding a Caption

Word can add captions to charts, images, tables, equations, and other objects. Right-click on the object and choose “Caption.”

Figure 16

Figure 16:  Caption Label

A caption label, like “Figure 1,” is added automatically to each new caption you create. To change the default label, click on the “New Label...” button.

Figure 17

Figure 17:  Select Position: Above or Below Object

Choose the position—above or below the selected object—where you want captions to appear.

Do you use captions frequently?

If you routinely use captions, you may want to have Word automatically insert them each time charts and images are added to your document. In the Caption dialog box, click on the “AutoCaption...” button and check off the file types that will receive captions. For more information about captions, see the Microsoft Help documentation.

The Table: Formatting for Accessibility

Specifying a Table Heading

Table headings help readers understand how tables are organized into columns and rows. While many authors try to indicate a heading row by changing its appearance (e.g., font and background color), a change of this type provides little or no information about the structure of the table. A document that relies entirely on visual formatting will, when converted to HTML or PDF, lack the structural information needed by readers who use assistive technology. Fortunately, Word offers a setting for table headings that does indicate table structure: “Heading Rows Repeat.”

To specify a table heading row, follow these steps:

  1. Select the table row that contains the column labels. The selection must include the first row of the table.
  2. With the row selected, choose Table > Heading Rows Repeat. This setting toggles on or off. A checkmark in front of the command indicates that it is on (see Figure 18).

More information about this topic For more information about table headings, see the tutorial “Specifying Table Headings in Word 2003.”

Figure 18

Figure 18:  Heading Rows Repeat

Select the first row of the table, then choose Table > Heading Rows Repeat. This option helps preserve information about the table structure that can assist readers using assistive technology.

Adding a Table Caption

Just as captions can be added to charts and images, so can they be added to tables, where they provide the same informational and organizational benefits.

Follow these steps to add a caption to the table:

  1. With the entire table selected, right-click (or press Shift+F10) and choose “Caption...” from the context menu.
  2. Click on the “New Label...” button. This will allow you to change the default label of “Figure 1.”
  3. Enter the new Label text: “How Word Styles Transfer to HTML and PDF.” The label can contain up to 40 characters and spaces.
  4. Click “OK” to close the New Label dialog box.
  5. From the “Position” menu, select “Above selected item.” (Refer to previous fgures 15, 16, and 17 under “Adding a Caption.”)
  6. Click OK.

Document “Title” and Other Metadata

The term metadata is commonly defined as “data about data.” If that definition leaves you scratching your head, consider this familiar example: a book search at your local library. If you think of the book as a set of data, then the library record for that book—consisting of title, author, subject, publication date, etc.—contains metadata. Metadata is the information about the information contained in the book. To locate the record for the book, you will need to search for keywords in the library’s catalog of metadata.

In Word, metadata are called “document properties.” They can be accessed by choosing File > Properties. Document properties include title, author, subject, and keywords. These pieces of information transfer easily to other file formats, PDF in particular.

Unfortunately, the only property that transfers seamlessly to HTML is “title,” although the other properties will appear in the HTML code as comments—i.e, information that is coded to be ignored by the browser. The properties will look something like:

<o:Author>Thomas Jefferson</o:Author>

If you are familiar with HTML coding, you can convert the commented properties to HTML meta tags with little effort. If not, you can add just the “title” property in Word and use HTML editing software, like Dreamweaver, to add the remaining metadata.

Adding Metadata

To add metadata (document properties) to a Word document, follow these steps:

  1. Choose File > Properties.
  2. If it is not already selected, click on the Summary tab (see Figure 19).
  3. Enter a Title for the document (*see note below).
  4. Click OK.
  5. Save your document (Ctrl+S).

*Note: When the document is converted to HTML of PDF, its title will be used for identification by web browser software and search engines. It is therefore recommended your title be descriptive, and that you place unique identifiers at the beginning and any repeating information at the end. For example, the title “Faculty Information - Civil Engineering Department - Colorado State University” will yield a more useful bookmark or search result than “Colorado State University Department of Civil Engineering - Faculty Information” (italics added to emphasize the essential information).

Figure 19

Figure 19:  Word’s Document Properties

Word’s “document properties” translate to “metadata” in the HTML and PDF formats.

More information about this topic For more information about adding and editing metadata in web documents, see the following modules:

Removing Personal Information

There may be times when you don’t want to attach your personal information to a document. Thankfully, Word provides an option to remove personal information as documents are saved. If you choose this option, Word removes file properties (Author, Manager, Company, and Last saved by), as well as personal information associated with comments (names, date, and time), email headers, and version tracking.

To remove personal information from a Word document, follow these steps:

  1. Choose Tools > Options, and click on the “Security” tab.
  2. Select the “Remove personal information from file properties on save” check box (see Figure 20).
  3. Click OK.

Once you save the file, all personal information will be deleted.

Figure 20

Figure 20:  Removing Personal Information

If you want to remove personal information from a Word document, choose Tools > Options, click on the “Security” tab, then check the option, “Remove personal information from file properties on save.”

Create a Table of Contents

Rare is the document that cannot benefit from a table of contents. Word creates tables of contents based on the heading styles it finds in the document. Because we have organized the Working Document around four heading levels, we are ready to let Word automatically generate a table of contents for us. However, we first need to decide how we intend to use the finished document. Do we want to print it directly from Word, or is our goal to convert it to HTML or PDF?

A printed document typically requires page numbers for each table of contents entry. In HTML, on the other hand, hyperlinks are generally more useful than page numbers. If creating a PDF is our goal, it may be preferable to skip Word’s table of contents altogtether in lieu of the “bookmarks” that will be created automatically during conversion to PDF.

More information about this topic See the module Adobe PDF, Universally Designed for more information about creating bookmarks.

To create a table of contents in the working document, follow these steps:

  1. Position your cursor in the document where want like the table of contents to appear.
  2. Choose Insert > Reference > Index and Tables... (see Figure 21).
  3. Click on the tab labeled “Table of Contents” in the dialog box that appears.
  4. If you plan to print the document in Word, make sure the “Show page numbers” option is checked (Figure 22-a). If you plan to convert it to HTML, make sure the “Use hyperlinks instead of page numbers” option is checked and “Show page numbers” in unchecked (Figure 22-b).
  5. Click OK.
  6. Save your document (Ctrl+S).

Note that styles for table of contents headings can be modified from the Index and Tables dialog box. Click on the “Modify...” button, then select the “TOC” heading level you wish to change (Figure 22-c). Again, click “Modify...” and change the font, paragraph settings, and any other characteristics needed to created the appearance you want.

Figure 21

Figure 21:  Insert Table of Contents (TOC)

To insert a table of contents, choose Insert > Reference > Index and Tables.

Figure 22

Figure 22:  TOC Settings

Depending on how you intend to use the document, you may want to show or hide page numbers (a), or replace page numbers with hyperlinks (b). You can also change the formatting of styles associated with each heading level (c) so that your table of contents looks just the way you like it.

Preserve the Contents of Headers and Footers

When a multipage Word document is converted to HTML, it generally becomes one long page. Headers and footers are therefore left behind. If you wish to preserve the contents of headers and footers, you will need to move any text and graphics they contain to the body of the document.

Note that Adobe Acrobat preserves every aspect of your Word document, including page breaks, headers, and footers. The following technique therefore does not apply to documents that will be converted to PDF.

Follow these steps to preserve header and footer content when converting to HTML. Let’s begin with the footer:

  1. Double-click on the footer to open it.
  2. Select all of the text (Ctrl+A), then copy it to the clipboard (Ctrl+C). (See Figure 23.)
  3. Close the footer by clicking the “Close” button on the Header and Footer toolbar.
  4. Insert the cursor at the very bottom of the document on the last line.
  5. Paste the text (Ctrl+V).
  6. Save the document (Ctrl+S).

Now, let’s consider the header. In the working document, the header contains two images, the ACCESS Project logo and the Colorado State University logo. To preserve these images in the HTML conversion, you will repeat the same process used for the footer text. In other words, you will double-click to open the header, select an image, close the header, and paste the image into the main body of the document. Repeat for the second image.

Figure 23

Figure 23:  Select Footer Text

Double-click on the footer to open it for editing. Select its contents (Ctrl+A), then copy the selected text (Ctrl+C).

Convert to HTML

Choosing a File Format

Word offers three options for converting documents to the HTML format:

  • Single File Web Page (.mht, .mhtml)
  • Web Page (.htm, .html)
  • Web Page, Filtered (.htm, .html)

Although each option has its advantages and disadvantages, the ACCESS Project recommends “Web Page, Filtered.” Why this option? The explanation requires a little understanding of how word creates web pages. The word “filtered” provides a clue.

By default, Word inserts a great deal of esoteric HTML code into the web pages it creates. It does this to preserve as much of the original formatting as possible, in case you want to re-open and edit the file in Word. Unfortunately, most of this “bloat code,” as it’s sometimes called, is ignored by the web browser and leads to unnecessarily large files. Even worse, the extra code makes it very difficult to edit the document in an HTML editor. Which brings us back to the word “filtered.” By filtering out this additional code, your web pages become smaller and easier to work with. Be aware that some formatting may be lost in this streamlined HTML format.

NOTE: To help maintain the original appearance of Word documents, you may wish to investigate an inexpensive software program called the Illinois Accessible Web Publishing Wizard (http://www.virtual508.com/) . The Wizard does a good job of preserving the details of a Word document, including charts and tables, while producing web pages that are highly accessible.

There is another reason we think you should choose the “Filtered” option, especially if you plan to work with the web page in an HTML editor like Adobe Dreamweaver. When converting to HTML, Word saves graphics and charts contained in the document to a separate folder. With the Filtered option selected, Word saves images in standard file formats: GIF and JPEG. By contrast, the default “Web Page” option produces some non-standard file formats, along with a separate header and an XML file list. Incorporating these disparate elements into your website may prove difficult.

And what of the first option, “Single File Web Page”? This option produces a page that can be viewed only in Microsoft Internet Explorer or Word. Although this format may be good in theory, it has yet to be adopted by other software applications. In many ways, it bears more resemblance to a self-contained PDF file, without offering PDF’s advantages.

Saving as Web Page

To convert the working document to HTML, follow these steps:

  1. Choose File > Save As (or File > Save as Web Page).
  2. From the “Save as type” drop-down list, choose “Web Page, Filtered” (see Figure 24-a).
  3. Notice the “Page title,” as it is displayed above the “File name” textbox. The title is the label of the page when it is viewed on the Web; it is what appears in a list of bookmarks or favorite locations. To change the title of the new HTML document, click the “Change Title...” button (Figure 24-b).
  4. Enter a new file name, or accept the default name supplied by Word.
  5. If necessary, navigate to a new location before saving the document.
  6. Click Save. Because you selected the “Filtered” option, Word warns you that saving in this format will remove Office specific tags (see Figure 25).
  7. Click “Yes” to create the filtered web page.
Figure 24

Figure 24:  Save as “Filtered” Web Page

To preserve HTML accessibility, choose the “Save as Web Page, Filtered” option (a). If necessary, you can change the web page title (b) that will appear in the browser window.

Figure 25

Figure 25:  Warning about Removing Office-Specific Tags

Word will warn you that saving in the “filtered” format will remove Office specific tags. That’s OK; we want to remove this unnecessary code from the HTML page.

Cleaning up the HTML code

As mentioned earlier, Word adds a great deal of additional code to the HTML pages it creates. This code is ignored by all applications other than Word and Internet Explorer.

Following are two methods for removing the superfluous code. One involves Adobe Dreamweaver, the other an online application called HTML Tidy.

Using Adobe Dreamweaver

To “clean” the code in Dreamweaver, follow these steps:

  1. In Dreamweaver, open the HTML page created by Microsoft Word.
  2. Choose Commands > Clean up Word HTML... (Figure 26).
  3. In the Clean Up Word HTML dialog box, select some or all of the checkbox options (Figure 27-a).
  4. Click “OK.”
  5. When the process is complete, a dialog box will alert you to the changes made to the HTML code (Figure 27-b).
Figure 26

Figure 26:  Dreamweaver’s “Clean Up HTML” Command

Dreamweaver provides a clean-up option just for Word-generated HTML code.

Figure 27

Figure 27:  Clean Up Word HTML Dialogs

The Dreamweaver Clean Up Word HTML dialog box (a) offers many “clean-up” options. Once it runs, Dreamweaver reports the changes it made the HTML code (b).

Using HTML Tidy

To “clean” the code in HTML Tidy, follow these steps:

  1. Close Word, then navigate to your new HTML document.
  2. Open the document in your browser (Internet Explorer, Firefox, or other).
  3. Choose View > Source. A new page will open showing the HTML code for the page (Figures 28-a and 28-b).
  4. Select all of the the source code (Ctrl+A), then copy it (Ctrl+C).
  5. Navigate online to http://infohound.net/tidy/
  6. Paste (Ctrl+V) the code into the textbox labeled “HTML” (see Figure 29-a).
  7. Check the first option labeled “Clean” (Figure 29-b). You may also check additional options.
  8. Click the “Tidy!” button (Figure 29-c).
  9. Once the process is complete, a new screen will appear with two links at the top. Choose “Download Tidied File” (see Figure 30).
  10. Choose “Save” or “Save to Disk,” depending on the web browser you’re using.

In Microsoft Internet Explorer, follow the instructions when asked to specify a name and location for the new HTML page. In Firefox, the page will be saved to a default location, specified in application preferences (Tools > Options > Main > Downloads). Once the page has been downloaded in Firefox, it can be opened from the Downloads window (Tools > Downloads). Click on the “Open” link to the right of the downloaded file.

Figure 28

Figure 28:  Viewing Source Code

Behind every web page (a) is a good deal of HTML source code (b). Choose View > Source to reveal the source code of an HTML page. This is where you can see the tags that provide structure to the page.

Figure 29

Figure 29:  HTML Tidy

Options available on the HTML Tidy input page. Paste HTML source code into text box (a), check the “Clean” checkbox (b), and click the “Tidy!” button.

Figure 30

Figure 30:  Retrieving the “Tidied” File

Once HTML Tidy has run, it displays the new source code (a). You can also download the page to your computer (b), where you can then open the page in your web browser to view the results.

Viewing the Final Document

View the “cleaned” document with Internet Explorer or Firefox. If formatting changes occurred that compromise the document’s usefulness, you might consider converting the original with the Illinois Accessible Office Wizard.

Remember, the goal in designing web publications is not to achieve absolute control over what the viewer sees. Rather, the goal is to make documents flexible so that they can be viewed in any number of ways, using different types of technology. To reach the largest possible audience, you should anticipate the diverse needs of your readers.

Validating Code

Finally, always remember to validate your HTML code, and validate your Cascading Style Sheets as well. Code validation takes only a minute, but it can spare you, and your readers, the frustration that comes when documents can’t be viewed properly.

Convert to PDF

Converting a Word document to the Adobe PDF format requires that you have Adobe Acrobat (Standard or Professional) installed on your computer. Once Acrobat is installed, a new menu, “Adobe PDF,” appears on the Word menu bar. To increase the accessibility of your PDF documents, always use this menu when converting to PDF.

Following are the steps you can take to create an accessible PDF from your Word document.

Checking Settings for PDF Bookmarks

PDF documents contains a navigation pane called Bookmarks, which often performs the role of a table of contents. Like the table of contents in Word, Bookmarks are based on Word’s headings. You control which heading levels will be included in bookmarks when the document is converted from Word to PDF.

To view or change settings for conversion of Word’s headings to PDF bookmarks, follow these steps:

  1. Choose Adobe PDF > Change Conversion Settings (see Figure 31). The Acrobat PDFMaker dialog box will appear.
  2. Click on the “Bookmarks” tab.
  3. Verify that the “Convert Word Headings to Bookmarks” checkbox is selected (see Figure 32-a). Be default, all heading levels are selected, but you can uncheck the boxes for levels you do not wish to include (Figure 32-b). (You can also create PDF bookmarks from Word’s styles, although this option can produce some unexpected results.)
  4. Click OK to save changes.
Figure 31

Figure 31:  PDF Conversion Settings

To control which heading levels are included in the bookmarks, choose Adobe PDF > Change Conversion Settings.

Figure 32

Figure 32:  Word Outline Levels to PDF Bookmarks

PDFMaker gives you control over how bookmarks are created. For this tutorial, select the “Convert Word Headings to Bookmarks” checkbox (a), and the headings (b) you wish to appear as PDF bookmarks.

Converting to PDF

To convert the document from the Word format to PDF, follow these steps:

  1. First, save the document: File > Save (Ctrl+S).
  2. Choose Adobe > PDF > Convert to PDF (see Figure 33).
  3. In the “Save Adobe PDF File As” dialog box, verify or change the file name and location of the new PDF file.
  4. Click “Save.”
Figure 33

Figure 33:  Convert to Adobe PDF

When converting a Word document to PDF, always use “Adobe PDF” menu which is added to Word when Acrobat is installed. Creating a PDF in this way creates a more accessible PDF document.

Acrobat PDFMaker will indicate the progress of the conversion, which may take some time depending on the size and complexity of the document. When PDF creation is complete, the new document will open in Adobe Acrobat.

Note that “Adobe PDF” may also be a choice in the Print dialog box once Adobe Acrobat has been installed. Unfortunately, PDFs created using the Print option are “untagged,” making them largely inaccessible to users of assistive technology.

More information about this topic See the module Adobe PDF, Universally Designed for more information about creating accessible PDF documents.

Checking Your PDF

Once the PDF has been created, you’ll want to check it for completeness, accuracy, and accessibility. You will also want to improve its accessibility by making a few simple changes.

Let’s look specifically at two of the features we added in Word: metadata and bookmarks.


To check the metadata for the PDF document, follow these steps:

  1. With the PDF document open in Acrobat, choose File > Document Properties (Ctrl+D). (See Figure 34 below.)
  2. Click on the “Description” tab (Figure 35-a).
  3. Verify that Word’s “document properties” have transferred to the PDF (Figure 35-b). If you want to add more descriptors, such as copyright information, click on the “Additional Metadata” button (Figure 35-c).
  4. Click on the “Advanced” tab.
  5. Under “Reading Options,” set the Language to “English US.” This tells screen reader technologies how to interpret and pronounce the text (for example, as English, not Spanish). (See Figure 36.)
Figure 34

Figure 34:  View PDF Document Properties

PDF metadata can be viewed and edited by choosing File > Document Properties (Ctrl+D).

Figure 35

Figure 35:  View and Edit Specific Properties

In the Document Properties dialog box, click on the “Description” tab (a). Verify that properties (or ‘metadata’) added in Word were transfered to the PDF document (b). Information can be edited in any field. To add additional metadata, such as copyright information, click on the “Advanced” button (c).

Figure 36

Figure 36:  PDF Language Specification

To increase accessibility, give the PDF document a language specification. In the United States, this is usually “English US.”


To check the bookmarks for the PDF document, follow these steps:

  1. Click on the Bookmarks tab. Bookmarks will be displayed in the Navigation pane (Figure 37).
  2. Review the organizational structure of bookmarks. The organization should match the outline in Word.
Figure 37

Figure 37:  PDF Bookmarks

Bookmarks are located on a tab in the Navigation pane.

You can also add, edit, and remove bookmarks, as needed:

  • To create a bookmark, choose Edit > Add Bookmark (Ctrl+B). (Figure 38-a.) If you select some text from the document prior to creating the bookmark, that text will automatically become the bookmark’s target (i.e., its linked destination) and label.
  • To edit an existing bookmark, first select it, then choose Options > Properties. Alternatively, you can right-click on the bookmark and choose Properties (Ctrl+I). (Figure 38-b.)
Figure 38

Figure 38:  Adding, Editing, and Deleting Bookmarks

To create a new bookmark, choose “New Bookmark” from the Options menu in the Navigation pane (a). To re-label a bookmark or edit its link, click on it and choose Options > Properties (b).

Overall Accessibility

Acrobat offers two accessibility checks, “Quick” and “Full,” both of which help identify potential barriers for readers using assistive technology. To check the accessibility of a PDF, follow these steps:

  • Choose Advanced > Accessibility > Full Check (see Figure 39).

If accessibility problems are found, you can fix them by following the instructions provided in the Accessibility Report. In many cases, the simplest solution may be to return to Word or the original authoring application, fix the problem, then recreate the PDF. For example, missing alternative text for images can usually be resolved in this way.

Figure 39

Figure 39:  PDF Accessibility Check

Acrobat offers two accessibility checks. For the most thorough check, choose Advanced > Accessibility > Full Check.


Congratulations! You have just created a universally designed web document in either HTML or PDF. The accessibility and usability features you added to the document in Word have paid dividends in these new file formats. By adding structural headings, lists, alternative text descriptions of visual information, table headings, captions, metadata, and a navigable table of contents, you have transformed the “working document” into a publication that more people can access using a wider range of technologies.

More information about this topic The following related modules may also be of interest:



The following tutorials are available on the Microsoft website.

Tables I: Create and format basic tables
This course, the first in a series on tables, will teach you how to add tables to your Word documents and show you some handy uses for them.
Tables II: Use tables to simplify complex page layouts
In this course, the second in a series of three, you will learn key best practices for managing tables effectively, as well as how to use tables with confidence to simplify most any page layout.
Tables III: Manage financial tables and tables from Excel and the Web
In this course, the last in a series of three, you will learn key best practices for some common advanced table tasks, including managing tables that originate in Excel or on the Web and formatting financial tables.


Create a Chart
Tips for creating charts in your Word documents

Please give us your feedback!

Preparing for Conversion to HTML and PDF
Was the information in this module helpful?