Helpblog502

Creating a Web Page Using Microsoft Word. Microsoft Word is normally used to create documents such as memos, letters, or reports. However, you can also use Word to create Web pages. A special template, Web Pages, contains the formatting necessary to get you well on your way to completing a Web page. To create a Web page in Word, you simply. In short, Microsoft has paired Word with the sorts of functionality available through their Google cloud suite. Combine that with the polished and refined features at the heart of Word, and you have one of the finest word processing applications around. WordWeb Pro runs under Windows Vista, Windows 7, 8 and 10 (desktop). You do not need to be online to use WordWeb. See Using WordWeb pro for screen shots.

WebAIM offers a four-week online course on document (Word, PowerPoint, and PDF) accessibility. Learn more about the Document Accessibility Course.

Introduction

Microsoft Word is the most widely used word processor on the market, and the .docx format is the de facto format for text documents. It is also often used to create PDF and HTML files for websites. There are several things you can do to make your Word Documents more accessible for people with disabilities, and this capability improves with each version of Office.

The following best practices are provided to help you maximize the accessibility of your Word documents. On this page you will find general principles for increasing accessibility in all versions of Word.

When you are ready to put these recommendations into practice, select your version of Word from the article contents or at the bottom of this page.

Headings

A good heading structure is often the most important accessibility consideration in Word documents. When encountering a lengthy Word document, sighted users often scroll and look for headings to get an idea of its structure and content. Screen reader users can also navigate Word documents by headings. For example, screen reader users can access a list of all headings in the document, jump from heading to heading, or even navigate by heading levels (e.g., all second-level headings).

However, this only works if Word's Heading styles are used. Unfortunately, it is a common practice to create a 'heading' by highlighting the text and applying a different font, a larger font size, bold formatting, etc. using Word's Font styles. These Font styles will provide visual headings but not the document structure needed for navigation by assistive technology users is missing.

Heading levels should represent the structure of the document.

• A Heading 1 is the document title or a main content heading. There is generally just one Heading 1 per document, although it is possible to have more than one (e.g., a journal where each article is a Heading 1).
• A Heading 2 is a major section heading.
• A Heading 3 is a sub-section of the Heading 2.
• A Heading 4 is a sub-section of the Heading 3, and so on.

You should not skip heading levels, such as using a Heading 4 after a Heading 2 with no Heading 3 between the two.

Word supports Heading 1-9, but web pages and PDF files only support 6 levels of headings. For this reason, we recommend limiting yourself to Heading 1-6.

Alternative Text for Images

Word For The Web Office

If an image presents content or has a function, you must provide an equivalent alternative text for this image. This information will be presented to a screen reader user when they encounter the image.

There are two ways to provide alt text in Word documents:

1. Use the 'Alt text' functionality in Word. You can add 'Alt text' text to Pictures, Shapes, Charts, SmartArt, and (in Office 365) Icons and 3D Models.
2. Provide an alternative in the surrounding text.

For complex images like charts, you will often need to provide succinct 'Alt text' plus a table or lengthier text alternative near the image.

Alternative text should be:

• Accurate and equivalent – present the content or function as the image.
• Succinct – a few words are usually enough; a short sentence or two is sometimes appropriate.
• NOT be redundant – do not provide information that is in the surrounding text.
• NOT use descriptive phrases – screen reading software identifies images, so do not use phrases such as 'image of...' or 'graphic of...'.

Data Tables

A data table is a grid of information organized into columns and rows. Sighted users scan a table to make associations between data in the table and their appropriate row and/or column headers. Screen reader users make these same associations if tables are structured correctly. The tools for creating accessible tables are limited—especially in older versions—but you can identify a single row of column headers and a single column of row headers.

Links

Links in Word documents allow users to visit web pages, send an email, and to navigate to headings or bookmarks within the same document. When you paste a webpage address—or URL—into a document and hit Enter or Space, Word automatically creates a link and uses the URL as the link text. It is usually best to give the link more descriptive text.

Follow these principles to create accessible links:

• Use descriptive link text that does not rely on context from the surrounding text.
• Keep the amount of text in the link to a minimum.
• Use underlined text with a color that stands out from the surrounding text.

Screen reader users may skim a document by navigating from link to link. Avoid ambiguous link text that is difficult to understand out of context (e.g., 'click here').

Lists & Columns

Lists and columns add important hierarchical structure to a document. Sometimes users create 'lists' and 'columns' manually by hitting the Tab to indent content. While this provides visual structure for sighted users, it does not provide the document structure needed for assistive technology users.

There are two types of lists used in Word: bullets and numbers. Bulleted lists are used for a group of items without an order or hierarchy:

• Ketchup
• Mustard
• Pickles
• Onions

Numbered lists present a group where the number of items matter or where there is an order or sequence:

1. Preheat grill with 'high' heat setting.
2. Cook hamburgers on 'medium' heat setting.
3. Flip hamburgers when juices are visible on the top of the patty.
4. Remove hamburgers when the inside temperature is 160℉.

Other Principles

• Use simple language.
• Ensure that font size is sufficient, usually a minimum of 11 points.
• Provide sufficient contrast between text colors and background colors.
• Do not use color as the only way to convey information.
• Be careful with the use of watermarks. They can impact readability and create low contrast.
• Provide a table of contents for long documents.

Accessibility Checker

Word has an Accessibility Checker for identifying and repairing many accessibility issues. The checker's Inspection Results classifies accessibility issues into three categories:

• Errors: content that makes a document very difficult or impossible for people with disabilities to access.
  • Example: an image with no alt text.
• Warnings: content that in most—but not all—cases makes the document difficult for people with disabilities to access.
  • Example: a link with text that is not descriptive of its function.
• Tips: content that people with disabilities can access, but that might be better organized or presented.
  • Example: skipping from a first-level heading to a third-level heading.

Clicking an item in the results highlights the corresponding item in the document and displays the Additional Information section:

• Why Fix: explains why the issue impacts accessibility.
• How to Fix: suggestions for repairing the issue.

Converting to PDF

Many Word documents end up as PDF files. It is a convenient way to preserve formatting and accessibility information, assuming the file is converted correctly. Read more on converting a Word document to accessible PDF in our Acrobat/PDF article.

Make sure that you have the right version of Acrobat for your version of Word. Some accessibility information may still need to be added in Acrobat Professional.

Principles into Practice

Ready to get started? Select your version of Word:

Microsoft Word is normally used to create documents such as memos, letters, or reports. However, you can also use Word to create Web pages. A special template, Web Pages, contains the formatting necessary to get you well on your way to completing a Web page. To create a Web page in Word, you simply design the page as a document, using a Web page template if you like, and then save the document as an HTML document. When you save an HTML document, a folder is saved along with it. The folder, containing images and information relevant to the formatting of the Web page, is placed on the same disk and in the same folder location as the HTML document.

Creating a Home Page

A home page is the first page that visitors will see when they access your Web site. In many cases, the home page is the entire Web site, but you have the option of including other pages that can be linked to the home page. To create a home page using Word, you will probably want to use either a Web page template or the Web Page Wizard. Both items are available when you select the Web Page option from the General Templates area.

To create a home page:

1. Open Word (Click Start, All Programs, Microsoft Word).
2. Click File, New. In the New Document task pane, click General Templates. Click the Web Pages tab, as shown in Figure C.1.
   Figure C.1
   A Web Page template provides assistance with developing a Web page.
   
3. Choose a Web page style or let the Web Page Wizard guide you through the steps of creating a Web page. The page shown in Figure C.2 was based on the Left Aligned Column style.
   Figure C.2
   This Web page was developed using Word’s Left Aligned Column style.
   
4. A Web page structure appears, in which you can click and drag to select a section to change, and then type text to replace the selection. Change the heading, and replace existing text with your own. Delete any existing text that you no longer need as a placeholder.
5. Change the attributes of any text. You can change text’s font size, type, or color, and apply any attributes, such as boldface, italics, or underline.
6. To add a background color, click Format, Background and choose a color. If you want to include a fill effect instead of a solid-color background, click Format Background, Fill Effects.
7. Periodically save the page as a Web page. Click File, Save As. Click Web Page, give the page a name, indicate the location (disk and folder) where the file should be saved, and click Save. A Web page filename cannot contain spaces (2004Reunion is OK; 2004 Reunion is not.)

Including Images
Seldom is a Web page entirely text. Most include images and even animation to make the page more appealing and eye-catching. You will most likely want to include one or more images on your page, as well. Web page images can be pictures from your digital camera; clip art that you collect from Word or from other sources, such as the Internet; or scanned pictures. If you are using a Word Web page template that includes an image, you will need to remove the image and replace it with one of your own, or leave the space empty.
To include an image on a Web page (using a Word Web page template):

1. Click the image to be removed or replaced, and press Delete.
2. If the image to be placed on the Web page is a picture, it should be saved as a JPEG file. The JPEG file format is best for displaying photographs, whereas the GIF format is more often used for line drawings, large blocks of color, and animation. If you have an image editor, you can open the image in that software and save it as a JPEG file. Your image editor might give you the option of saving a file as a Web-ready picture. When you choose the Web-ready option, the picture is automatically saved as a JPEG file in an appropriate size for display on a Web page. If you don’t have an image editor, you can open the picture in Paint (Click Start, All Programs, Accessories, Paint), and change the file type to JPEG, if necessary, before saving it. To change the file type, click File, Save As, and then select JPEG from the drop-down list beside the file type area.
3. To place the image on the Web page that you are developing, click where you want the picture to go, and click Insert, Picture, From File (or Insert, Picture, Clip Art if you are selecting from Word’s clip art inventory). Navigate to the disk and folder containing the picture to be inserted, and double-click the image file.
4. Resize the image by clicking to select it and then clicking and dragging a corner handle.
5. If you are using a Word Web page template, you will probably be able to type text beside and beneath the inserted image. If, for some reason, you are not able to type beside the image, you must format the image to allow that to occur. Right-click the image, and select Format Picture from the context menu. Click the Layout tab. Click Square. Click OK. At that point, you can type text beside and beneath the picture.

Linking Web Pages
The next time you are on the Internet, take a careful look at any Web page. More likely than not, you will be able to identify several graphic or text hyperlinks. You can tell that a picture or text is a link because the mouse pointer becomes an arrow or pointing hand when you move over the link. Links connect to other Web pages so that you can easily move among pages without typing new page addresses. When creating a Web page using Word, you can create links to other pages that you plan to create or to other pages already on the Internet.
To link pages (using Word):

Ms Word Web App

1. Create as many pages as you want to include in your Web site. Each Web page is a Word file.
2. To link the Web pages that you have created, or to link to another Web page, you must include one or more hyperlinks on your home page.
3. On the home page, type text for a hyperlink. For example, if you want to include a link on your home page to the Reunions.com page, type some text, such as “For reunion recipe ideas, click here,” as shown in Figure C.4a. Then click and drag to select the link text, and click Insert, Hyperlink. At the dialog box, shown in Figure C.3, click Existing File or Web Page. Type the Web address of the Web page to link. Click OK.
   Figure C.3
   Using the Insert Hyperlink dialog box, you can link text in a Word document to a Web site, so that the text becomes a hyperlink.
   
4. If you are linking between two pages that you have created, type text to indicate the link, such as that shown in Figure C.4a. Then, create a hyperlink by selecting the text and clicking Insert, Hyperlink. Click Existing File or Web Page. Navigate to the disk and folder holding the page to be linked, and double-click the page file. The linked page is shown in Figure C.4b.
   Figure C.4
   
   1. Text linking to another Web page on your Web site
   2. Text linking to another Web Site
   
   Text on one page (a) can be used to link to another page (b).
   Previewing Your Web Pages
   It is common practice to design a Web page offline, which means that you can spend as much time as necessary perfecting its design before you actually place it on the Internet. If you are using Word to design the page, you will complete the document and save it as an HTML file. At that point, you will certainly want to check on how it will look when displayed online. However, you don’t need to be online to check its appearance. You can simply use your browser, even offline, to open and preview the Web page.
   To preview a Web page:
   
   1. Open your browser by double-clicking the icon on the desktop or by locating it on the Start, All Programs menu. Click File, Open, as shown in Figure C.5.
      Figure C.5
      Open your Web page file in your browser to preview it.
      
   2. Click Browse, and navigate to the disk and folder in which your home page is stored (Figure C.6). Click OK.
      ure C.6
      You must indicate where the home page file is stored.
      
   3. The page will be displayed exactly as it would look on the Internet. Click to test any hyperlink. Click Back to return to the home page from a linked page.
   4. Close your browser.
      

      Copyright © 1995 - 2010 Pearson Education.All rights reserved. Pearson Prentice Hall is an imprint of Pearson . Legal Notice|Privacy Policy|Permissions