Making Your Web Sites More Accessible with Microsoft® FrontPage®2000

 


White Paper

Table of Contents

Introduction

Specific Design Suggestions

Add Document Type Definitions to Better Define Your Document

Provide Alternative Text for for All Images

Do Not Use Color Alone to Convey Information

Clarify Language Usage

Use Table Headers in Data Tables

Be Careful with Flickering, Blinking, or Movement in General

Set a Logical Keyboard Order in Forms

Set Keyboard Shortcuts For Form Fields

Use Image Maps Carefully

Approach New Technologies Carefully

Use Style Sheets to Control Layout and Look and Feel

Consider an Alternate Page that is Completely Accessible 

Strive for Clean and Simple Language

Strive for  Clear Navigation

Provide Long Descriptions for Frames Pages

Create Titles on All Frames

Compliance and Accessibility Standards

Verifying Accessibility of Your Web Site

In Conclusion

Making Your Web Sites More Accessible with
Microsoft® FrontPage®2000 Microsoft Office

White Paper

Published: April 2001

For the latest information, please see http://www.microsoft.com/frontpage

Introduction

When you create a Web site, there are some steps you can take to ensure that you reach as broad an audience as possible - one that includes users browsing your Web site with voice controls, screen readers, low-end and non-traditional browsers, users with low bandwidth, or with physical disabilities. It is a matter of good Web design to make sure that the largest target audience can view your pages.

  It is important to think of the delivery as Web content as just that, content, rather than in terms of Web pages.  People “view” Web sites in a variety of ways using a variety of clients and it is important to accommodate as many of them as possible in the Web design process.  

In addition to design considerations, U.S. laws and requirements on making Web sites accessible to users with disabilities also make a strong case for providing the most accessible Web site possible.

The purpose of this White Paper is to offer a number of specific design suggestions for creating a Web site with FrontPage 2000 that is as accessible as possible, as well as to provide details on where you can go for more information regarding this important topic.

Because Microsoft FrontPage 2000 allows you to create a Web site exactly the way you want, you can utilize the functionality provided by FrontPage to insure that your Web site reaches as broad of an audience as possible.

Specific Design Suggestions

Below are some tips intended to help you make your Web site more accessible.  This is not a complete list, but will offer some ideas and things to think about as you design and edit your Web site with FrontPage 2000. 

Single Column Text is Best

When developing a Web site, it is best to place all text in a single column.  Multiple-column text is hard to read by most screen readers because they read text from left to right regardless of certain cells and formatting.  In addition, the single column approach is also best for serving visually impaired users who use screen magnification software.

Add Document Type Definitions to Better Define Your Document

You may want to use a document type definition (DTD) at the beginning of your Web pages.   This is used by Web page validation tools as well as by browsers used to view your Web page(s).  By explaining exactly what type of document your Web server is serving, Web clients will be able to present that document in the most effective means possible.

You can create a custom template that contains the Document Type Definition so every document you create from that template will include the DTD.  To do so:

·         Open a new page in FrontPage

·         Switch to HTML view

·         Place your cursor at the top left corner of the HTML page, in front of the <html> tag. 

·         Type the document type definition you want to use.  You can use a custom one or one used in the samples below, such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

·         Choose File, Save As

·         In the File Name field, type the name you want to use for your template, for example: DocTypeFrames.

·         In the Save as type field, choose:  FrontPage Template

·         In the Save As Template dialog, add or change the Title, Name and Description fields as appropriate.

·         You may want to leave the Save Template in Current Web checkbox checked.  This creates a shared template which downloads into the custom templates dir for a person’s profile.  Every person who opens this web will get this shared template automatically downloaded to their local machine.  If someone wanted to share their template with its DTD, this is one way to do it.

·         Click OK.

The next time you open the Page Templates dialog, your new DocType template will show up.

Alternatively, you can directly edit and add one to

      <INSTALLDIR>\Templates\1033\Pages\normal.tem\normal.htm

(or any other built in template), and all subsequent pages created off of that template will include one. 

Sample syntax for the most commonly recognized DTDs are as follows:

Strict:  Recommended if you rely solely on style sheets to define the look or presentation of your page.  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional:  Recommended if you use formatting in favor of style sheets to define the look or presentation of your page.  W3C DTD Transitional Information can be found online at http://www.w3.org/TR/1999/REC-html401-19991224/sgml/loosedtd.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset:   Recommended for frames pages. W3C DTD Frameset Information can be found online at http://www.w3.org/TR/html4/sgml/framesetdtd.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Provide Alternative Text for All Images

You should add alternative text to images on your Web site. This will  provide key information to audiences using screen readers, browsers that don’t show images, or users who have turned off image viewing to speed up their browsing process.   To add alternative text in FrontPage:

·         Right-click on the image and select Picture Properties.

·         Select the General tab.

·         Type your alternative text in the Text box under the Alternative Representations section.

Good alternative text is short in length (not more than 10 to 15 words) and will supply the information that the picture or graphic conveys.  Imagine that you are reading the page to someone over the telephone.  Your alternative text should be similar to what you would say during this telephone conversation.  If the graphic is a picture bullet, alternative text can be as simple as “Bullet”.  If the graphic supplies additional information not available elsewhere on your page, you will want to use more informative text to detail the missing data.

Alternative text should also be provided for:

·         Symbols

·         Image Map Regions

·         Animations

·         Applets

·         Objects

·         Ascii Art

·         Frames

·         Scripts

·         Picture bullets

·         Picture spacers

·         HRs

·         Buttons

·         Video, Audio

If you wish to provide alternative text associated with an <AREA> tag, you will need to do so through the HTML view.

Do Not Use Color Alone to Convey Information

Your Web should be usable for individuals who cannot discern color or for users who are not viewing your site on a color screen.

For example instead of:  "All items listed in blue are on sale"; try "All items listed in blue and bold text are on sale." Alternatively, you can separate the sale items under separate headings.

Color combinations, such as background color and text, should provide good contrast so users with color deficits or low vision and users with black and white screens can still use your site.   For more information about the subject, Lighthouse International provides an excellent article on color and contrast usage at  http://www.lighthouse.org/color_contrast.htm.

Clarify Language Usage

When you need to switch to a different language in your Web site, the HTML should be marked so screen readers and Braille control codes can adjust appropriately.  This will also help audiences who use machine translators.  If you have the Office language settings tools installed, FrontPage 2000 will insert the correct HTML for you automatically. 

You can also enter the correct HTML yourself.  To do so, switch to the HTML view, locate the language change and surround the different language text with these tags:

<SPAN lang=”*“> and </SPAN>

In use, this would look like:

<p>Unfortunately, she only knew how to say <SPAN lang=”es”>un poco mas lento, por favor</SPAN>, but no matter how much more slowly he spoke, she could still not respond…

*Sample language codes (the codes that you would use between the quotation marks):

Use Table Headers in Data Tables

If your table supplies data for the user, you should designate a header row, a header column, or both for your table.  To designate a row or column as a header row in FrontPage 2000:

·         Select the row or column that should be designated as a table header row or column.

·         Right click and select Cell Properties.

·         Check the Header Cell checkbox.

Be Careful with Flickering, Blinking, or Movement in General

Dynamic effects can add visual interest to your site and are an exciting aspect of Web design.  For some individuals, flickering can be considered annoying.  On a different level, flickering can be a more serious issue for some and can even lead to seizures in special cases.  Avoid anything that causes screen flicker and avoid quick changes from dark to bright screens.  As a result, any use of movement in a Web page should be carefully examined before implemented.

In addition, the effects offered by flickering, blinking and movement are very hard to describe on a non-traditional browser.  .  If you are using movement to convey an image or stress a specific point of your site, be aware that some viewers will not perceive the point that you are trying to make.

It is generally a good idea to avoid using the blink and marquee tags all together.

Set a Logical Keyboard Order in Forms

To help users navigate through a form using the keyboard, you should ensure a logical tab order – the order in which the cursor navigates through the form information if the user tabs through the form.  To set tab order for forms in FrontPage 2000:

·         Right-click on a form element.

·         Select Form Field Properties.

·         Choose a number for that form element (1 for the first element the user should logically go to first) into the Tab Order box.

·         Repeat for each element within your form.

Set Keyboard Shortcuts For Form Fields

It is also possible to set keyboard shortcuts for all of the elements in your form field.  This feature allows users reliant on a keyboard or voice navigational interface to quickly more around your form as needed.  To set keyboard shortcuts in FrontPage 2000:

1.      In Page view, type text next to the field to create a label for it.

2.      Select the text and the field.

3.      On the Insert menu, point to Form, and then click Label.

4.      Select a letter in the field's label to use as the shortcut.

5.     Click Underline.

Use Image Maps Carefully

Image maps are an effective navigational element on a traditional browser but can cause problems for users who are not viewing your site with a traditional Web client.  Consider eliminating the use of image maps from your site completely and replacing them with a more traditional button or menu interface. 

If you must use image maps, use client-side (automatically created by FrontPage 2000) instead of server-side, as non-traditional browsers will have a better chance at presenting them effectively.  In addition, make sure that the links in the image map are available elsewhere in the page.  A text menu bar at the bottom of the image map is an effective way to accomplish this task.  

Approach New Technologies Carefully

Be extremely cautious when inserting the latest technologies into your Web site.  Multimedia presentations offered via products such as Flash, Java and Shockwave are seldom accessible to users who aren’t up to date with the latest technologies.  There are also numerous Web browsers that simply don’t have the capability to integrate such technology into their platform.

If new technologies are used in your site to communicate a specific point vital to the user experience, consider offering a more traditional presentation instead of, or in addition to, your multimedia.

Scripts and applets should be keyboard accessible or work with assistive technologies such as screen readers.  In addition, pages with scripts, objects and applets should be completely viewable when turned off or viewed from a browser that doesn’t support them.

Use Style Sheets to Control Layout and Look and Feel

Using style sheets to control the layout and look of your site is an advantage for users using special software to help them read or understand your site.  By developing a standard style that will be used throughout your site, you can assure many of the accessibility issues discussed previously.  Having a developer with specific accessibility requirements in mind produce the initial style sheets for your site can help maintain a desired level of quality assurance to accessibility requirements. 

You can edit any style sheets in FrontPage 2000 to suit your own needs and you can create and use your own style sheets in FrontPage 2000.  

Although some earlier browsers may not display all style sheet attributes, they will not have a negative effect on the presentation.

Consider an Alternate Page That is Completely Accessible

Many consider and approach Web development as an art form and love to exploit the fullest potential from their electronic creations. If your site must contain the latest tricks of the industry, consider producing an alternate page, or series of pages, that are completely accessible by anyone who is unable to use the newer technologies – for whatever reason.

It is, of course, best if you do not have to do this.  However, if you do, it is very important to remember that this page should be updated as frequently as the primary Web site, and should offer the viewer the same experience and information as the main page.

Strive for Clean and Simple Language

It is always a good idea to strive for clean and simple language on your Web site regardless of the abilities or technologies associated with your audience.  As your goal is to communicate your message to as many people as possible, using difficult terminology and industry buzzwords without a detailed explanation can cause an undesirable level of frustration at your Web site.

Strive for clean and simple language, easily understandable by anyone who might examine your Web content.  Consider a glossary or terminology page if you are using terms not part of normal discourse.

Strive for Clear Navigation

Because visitors to your Web site might not be navigating through the traditional browser interface, it is very important to produce a clear navigational structure for your Web site.  Options such as a simple text menu bar can help someone on the most primitive browser easily find their way through your site. 

Strive for a clear navigational structure for your site.  Not only does it make it more accessible, it is also an excellent practice for all levels of Web design.

Be Cautious When Working With Frames

In many ways, the best approach in the development of an accessible Web site is to stay away from frames.  Frames pages can create problems for any non-traditional browser.  Trying to convey the concept of a frame through a reader is extremely difficult.

Consider providing a non-frames version of your Web site if frames are deemed necessary.

Provide Long Descriptions for Frames Pages

If frames are absolutely necessary, a long description for frames pages can help assist the user in understanding the content that they are unable to view.

Sample HTML for a long description link for a frames page:

<frame name=”main” src=”chart” longdesc=”description of chart.htm”>

Create Titles on All Frames

Frames should have a descriptive title that indicates the type of information contained on the page.  For instance, a frame that will display the latest news story might be titled “Latest News” or “Current News”.

When you have created your frames page in FrontPage 2000 and are saving the document, you will be prompted for a Page Title for each frame in your frames page.  Above the title bar is a default frames title.  Click on the “Change Title…” button to the right of this default title and type your descriptive title in the “Set Page Title” dialog.

If you wish to update an existing set of frames with more descriptive titles, right-click in the frame you wish to update (or select the frame and press shift+F10 to access the menu).  Select Page Properties and on the General tab, type the descriptive title in the “Title” text box.

Compliance and Accessibility Standards

The World Wide Web Consortium (W3C) has been vital in developing interoperable specifications for Web design.  Their specifications for Web design are considered by many to be the standard for Web development and many Web developers strive to create products that meet their guidelines.  The W3C Web Content Accessibility Guidelines are available online at http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.    

U.S. laws and regulations may also guide web designers as producers of accessible software and services.  For example, Section 508 of the U.S. Rehabilitation Act requires that electronic and information technology provided by the Federal government be accessible: federal agencies must ensure that their websites and other technology are accessible to employees and members of the public with disabilities, to the extent it does not pose an 'undue burden.’

Microsoft has also put together more information on Accessible Web Design Guidelines.  This information can be found online at http://www.microsoft.com/enable/dev/web/.

Verifying Accessibility of Your Web site

You may want to use a tool to verify how well you do in making your web sites accessible. 

One such product, AccVerify for Microsoft FrontPage 2000 by HiSoftware provides comprehensive verification of policies and standards for Web sites, including programmatic/rule-based verification, a checklist for Priority One checkpoints, and Failsafe checking.  AccVerify is available as an automated server application, as a stand-alone application, or as an integrated add-on to Microsoft FrontPage 2000.

More information about HiSoftware and their products can be found online at http://www.hisoftware.com/.

In Conclusion

Web “surfing” is no longer limited to users that sit in front of a computer screen viewing the Internet on the latest browser with the fastest computer processor.  As the audience has expanded in both participants and Web clients, the need to provide a browsing experience for everyone becomes essential.  It is good business to build a Web site that can be viewed by as many participants as possible.

As seen above, the tools provided by Microsoft FrontPage 2000 enable you to build an accessible Web site. 

Microsoft FrontPage 2000 supports 100% HTML preservation and allows you to create a Web site exactly the way you want to, make sure to use the tool to build a Web site that is as accessible to as many people as is possible.  

The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Due to the nature of ongoing development work and because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This document is provided for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

© 2002 Microsoft Corporation. All rights reserved.

Microsoft, FrontPage, and  the Office logo are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.