Making your Web sites more accessible with FrontPage 2002

Whitepaper

Table of Contents

Making Your Web Sites More Accessible with FrontPage 2002

Microsoft Office Web Site Creation and Management Solution

Introduction

The Internet provides us with an easy way to publish and find information. However, information on the Internet is not always readily available to all users. Some people are unable to access the Internet through traditional Web browsers such as Microsoft Internet Explorer without the use of assistive technologies that enhance the way they interact with information. These assistive technologies, available from a wide range of third-party providers, include screen readers and Braille devices, audio browsers, screen magnifiers, text-only browsers, and voice input software. Other users, such as mobile professionals, are increasingly turning to alternative technologies to browse the Web, technologies such as cell phones and handheld computers with low-resolution displays. For each of these groups of users, it is important that a Web site provide alternatives.

Web programming today facilitates many types of non-text Web elements such as images, frames, applets, and tables. Yet most assistive technologies provide input to their users by interpreting text. What happens when an assistive device encounters a non-text element? In some cases, the device might stall. In other cases, the device simply provides no information about the element.

Today it is quite possible for Web developers to enable anyone to access the information on a Web page. When information on the Internet is accessible, everyone-including users of assistive and alternative technologies-can find and benefit from it.

This paper provides design techniques and suggestions for creating accessible Web content. Using the Microsoft FrontPage® Web site creation and management tool, Web designers can reach the largest audience possible.

Specific Design Suggestions

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

Use Single-Column Text

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. Additionally, the single column approach is also best for serving visually impaired users who use screen magnification software.

For some types of sites, of course, this may not be practicable. If this is the case, consider providing an alternate linear version. For a multi-column table, to take an example, use separate paragraphs to represent the information in each cell, and sequence the paragraphs in the order that one would read them in the table.

Add Document Type Definitions to Better Define Your Document

Use a document type definition (DTD) at the beginning of your Web pages. DTDs are recognized by Web page validation tools as well as by Web browsers and assistive technologies. When you explain exactly what type of document your Web server is serving, the user's browsing technologies will be able to present that document in the most effective manner.

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

  1. In FrontPage, open a new page.
  2. Switch to HTML view.
  3. Place your cursor at the top left corner of the HTML page, in front of the <html> tag.
  4. 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">

  1. Choose File and Save As.
  2. In the File Name field, type the name you want to use for your template-for example, DocTypeFrames.
  3. In the Save As Template dialog box, add or change the Title, Name, and Description fields as appropriate. You may want to leave "Save Template in Current Web site" selected. This creates a shared template that downloads into the custom templates directory for a person's profile. Every person who opens this Web will get this shared template automatically downloaded to his or her local machine. If someone wanted to share a template with its DTD, this is one way to do it.
  4. Click OK.

The next time you create a new page using the Page Templates dialog, your new DocType template will show up.

Alternatively, you can add a document type definition to an existing template, such as the normal.aspx template-located at <INSTALLDIR>\Templates\1033\Pages\normal.tem\normal.htm-or any other built-in template. All pages subsequently created from that template will include a document type definition.

Here is sample syntax for the most commonly recognized DTDs:

  • 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. For more information, see the World Wide Web Consortium (W3C) Transitional DTD information Web site.

<!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 the World Wide Web Consortium (W3C) Frameset Document Type Definition.

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

Note that the "!DOCTYPE" tag should appear in uppercase. If you click Tools and Page Options to use the HTML Source tab to apply formatting rules and have the "Tag names are lowercase" attribute selected in combination with the "Reformat using the rules below" option, FrontPage will change the document type definition to lowercase, which can cause problems for compatibility checkers.

Use Image Maps Properly

Whenever possible, use client-side image maps rather than server-side image maps. Client-side image maps are more user-friendly for users with assistive technologies. However, in some instances, the image map cannot be represented by a standard geometric shape. For example, you might be trying to provide users with a map of your state. The state map has active regions for each county. If you must use a server-side image map, be sure to provide redundant text links for all active regions of the map.

To provide redundant text links for server-side image maps, you can:

  1. Provide a list of text links for active regions of the image map.
  2. Include the links in the body of the OBJECT element.
  3. If the image map uses the IMG element, place the text links in the document after the IMG element and note the location of the links.

Provide Alternative Text for All Images and Non-Text Elements

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:

  1. Select the image.
  2. From the Format menu, choose Properties. Or press SHIFT+F10 and then O.
  3. In the Picture Properties dialog box, click the General tab. Or press CTRL+TAB until the General tab is showing.
  4. In the Alternative Representations section, type alternative text in the Text field.
  5. Click OK, or press ENTER.

The alternative text should describe the image, as well as its purpose or use on the page when applicable. When you create alternative text, you can pretend that you are describing the image to someone over the phone. As concisely as possible, your alternative text should convey the same essential information that the image conveys.

Picture properties

For example, suppose the Microsoft logo appears on a page and is used as a link to the Microsoft Corporation Web site. The alternative text for the logo might read "The Microsoft logo, with a link to the Microsoft home page."

In another example, suppose you are trying to explain to the page visitor how to apply for a grant. Instead of using a traditional bullet, you have used the paragraph symbol to indicate to the applicant that he or she must start a new paragraph for each requirement in the application. When you describe the bullet with alternative text, you might want to type something like "new paragraph". In this example, the bullet enhances the meaning of the content. The paragraph symbol, used as a bullet, is a reminder to the reader that each item should be listed separately. When the bullet does not enhance the meaning of the content, you can use words like "bullet" or "asterisk."

Using Alternative Text with Image Maps and Image Map Regions

FrontPage 2002 includes a dialog box that enables you to add alternative text to image maps and image map regions. To add alternative text to an image map region, do the following:

  1. Select the hot spot.
  2. From the Format menu, click Properties. Or press ALT+ENTER.
  3. In the top right corner of the dialog box, click Screen Tip or press ALT+P to add alternative text to the selected hot spot.
  4. In the Alternative Representations section, type alternative text in the Text field.
  5. Click OK, or press ENTER.

If you wish to provide alternative text associated with an <AREA> tag, you will need to do so through HTML view. You can use the following example to add alternative text using the <AREA> tag:

<IMG src="campus.gif" alt="Image map of buildings on the
corporate campus" usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="library.html" alt="Library">
<AREA shape="rect" coords="34,34,100,100"
href="caf1.html" alt="Main Cafeteria">
<AREA shape="rect" coords="34,34,100,100"
href="aud1.html" alt="Main Auditorium">
</MAP>

Alternative text should also be provided for:

  • Symbols
  • Animations
  • Applets
  • Objects
  • Ascii Art
  • Frames
  • Scripts
  • Picture bullets
  • Picture spacers
  • Horizontal Rules
  • Buttons
  • Video and Audio

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 using blue text to indicate sale items, consider inserting the text "sale item" before each sale item listing.
Although there are some style techniques available through markup language, style techniques can be cosmetic to the user, just as color is.

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, see the Lighthouse International's excellent article on Effective Color Contrast.

Identify Changes in Language

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 2002 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 the <SPAN lang="*"> and </SPAN> tags. The asterisk is a placeholder for the language code.

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.

Following are some sample language codes, which you would use to replace the asterisk between the quotation marks.

Language Codes for Identifying Language Changes
Abkhazian through French Frisian through Lingala Lithuanian through Sinhalese Siswati through Zulu
Abkhazian ab Frisian fy Lithuanian lt Siswati ss
Afar aa Gaelic (Irish) ga Macedonian (FYROM) mk Slovak sk
Afrikaans af Gaelic (Scots) gd Malagasy mg Slovenian sl
Albanian sq Galician gl Malay ms Somali so
Amharic am Georgian ka Malayalam ml Spanish es
Arabic ar German de Maltese mt Sundanese su
Armenian hy Greek el Maori mi Swahili sw
Assamese as Greenlandic kl Marathi mr Swedish sv
Aymara ay Guarani gn Moldavian mo Tagalog tl
Azerbaijani az Gujarati gu Mongolian mn Tajik tg
Bashkir ba Hausa ha Nauru na Tamil ta
Basque eu Hebrew he (iw*) Nepali ne Tatar tt
Bengali; Bangla bn Hindi hi Norwegian no Telugu te
Bhutani dz Hungarian hu Occitan oc Thai th
Bihari bh Icelandic is Oriya or Tibetan bo
Bislama bi Indonesian id (in*) Oromo (Afan) om Tigrinya ti
Breton br Interlingua ia Pashto, Pushto ps Tonga to
Bulgarian bg Interlingue ie Persian fa Tsonga ts
Burmese my Inuktitut iu Polish pl Turkish tr
Byelorussian be Inupiak ik Portuguese pt Turkmen tk
Cambodian km Italian it Punjabi pa Twi tw
Catalan ca Japanese ja Quechua qu Uighur ug
Chinese zh Javanese jw Rhaeto‑Romance rm Ukrainian uk
Corsican co Kannada kn Romanian ro Urdu ur
Croatian hr Kashmiri ks Russian ru Uzbek uz
Czech cs Kazakh kk Samoan sm Vietnamese vi
Danish da Kinyarwanda rw Sangho sg Volapuk vo
Dutch nl Kirghiz ky Sanskrit sa Welsh cy
English en Kirundi rn Serbian sr Wolof wo
Esperanto eo Korean ko Serbo-Croatian sh Xhosa xh
Estonian et Sesotho st Yiddish yi (ji*) &nb
Faroese fo Laothian lo Setswana tn Yoruba yo
Fiji Islands fj Latin la Shona sn Zhuang za
Finnish fi Latvian, Lettish lv Sindhi sd Zulu zu
French fr Lingala ln Sinhalese si
* indicates a former language code

Make Tables Accessible

Tables are used commonly in Web design. Sometimes tables are used to organize a page, perhaps as an alternative to frames. However, when tables are used to present data, the table must be made accessible.

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 2002:

  1. Select a row or column.
  2. On the Table menu, click Properties and then click Cell. Or press ALT+ENTER to reach the Cell Properties dialog box.
  3. In the Layout section, select Header cell.
  4. Click Apply and then click OK.

You also should associate data and header cells. A summary should describe the relationships of cell contents, and a caption or title should describe the type of information the table conveys. Scope, headers, and axes should be identified. An example of an accessible table follows:

<TABLE border="1"
summary="This table charts the number of products sold
by each member of marketing, the type of product, and
whether it was Trialware or Released.">
<CAPTION><b><i><font size="4" color="#CC0099"><br>
Number of products sold<br>
by each member of sales</font></i></b>
</CAPTION><TR>
<TH id="header1">Name</TH>
<TH id="header2">Number of Products</TH>
<TH id="header3" abbr="Type">Type of Product</TH>
<TH id="header4">Trial or Released?</TH>
<TR>
<TD headers="header1">Johnson</TD>
<TD headers="header2">20</TD>
<TD headers="header3">AccVerify</TD>
<TD headers="header4">Trial</TD>
<TR>
<TD headers="header1">Smith</TD>
<TD headers="header2">30</TD>
<TD headers="header3">AccVerify Server</TD>
<TD headers="header4">Released</TD>
</TABLE>

Follow Guidelines for Blinking or Flashing Elements

Blinking or flashing elements are a potential source of harm to some Web site visitors, so you should avoid screens that flash at frequencies between 2 and 55 hertz.

There are ways to create dynamic effects without causing elements to blink or flash at all. If you want to provide a focus for the page visitor, consider using an image or an animated graphic instead of a flashing element. Scrolling text, for instance, can be used to achieve a dynamic effect. Through the use of a scrolling text applet, the scrolling text can become static text with a keyboard command. This ability to pause the text presentation helps users with cognitive disabilities who might need additional time to process information. For more information, see the Java Accessibility Program Web site for an example of a scrolling text applet.

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 2002:

  1. Select the form element.
  2. On the Format menu, click Properties. Or press ALT+ENTER to open the Properties page.
  3. In the Tab Order field, type a number for the form element. (Form elements should be numbered sequentially to assist the user in navigating the form.)
  4. Click OK. (Repeat steps 1 through 4 for additional form elements.)

Set Keyboard Shortcuts For Form Fields

It is possible to set keyboard shortcuts for all of the elements in your form field. This feature allows all users to navigate the form easily. To set keyboard shortcuts in FrontPage 2002:

  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 Accessible Plug-Ins for Multimedia Elements

Be extremely cautious when inserting the latest technologies into your Web site. Multimedia presentations offered through products such as Flash, Java, and Shockwave are seldom accessible to users who are not up to date with the latest technologies. There also are numerous Web browsers that simply do not 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. However, if you must incorporate a new technology that requires a plug-in, the plug-in itself should be accessible.

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.

Creating Accessible Multimedia Presentations

For multimedia presentations, you should synchronize equivalent text with the presentation itself. Synchronizing equivalent information with a presentation is the same concept as using captions for a television movie. The text equivalent of the animation is presented on screen. The animation and the text equivalent are synchronized, so that the text equivalent describes the animation.

When you synchronize presentations in the same way for Web content, you are assisting people with vision and hearing difficulties. For people with visual impairments, the screen reader interprets the animation. For people with hearing impairments, the text version adequately describes the animation and the sound.

Because people accessing your Web content might have visual and hearing impairments, make your content describe the animation and the sound accurately. For example, be sure to describe noises that indicate the tone or mood of the animation, like a door slamming or a crowd cheering.

Creating Accessible Applets
In some cases, multimedia presentations require user input and cannot be replicated in an alternative format. For example, a mathematics program allows students to enter numbers and perform calculations. When providing equivalent text is not possible, make the applet accessible. You can make an applet accessible by providing descriptive text in the element content.

Allowing Additional Time
Multimedia presentations should allow a viewer additional time, if requested, to process information. One method of allowing the user additional time to view information is to use a scrolling text applet that allows the user the option to read the message in static form. For an example of such an applet, see the Java Accessibility Program Web site.

Using Multimedia Alternatives
Synchronized Multimedia Integration Language (SMIL), QuickTime, and Synchronized Accessible Media Interchange all support synchronized multimedia presentations with captioning. If you provide multimedia files in special formats, you also must provide a link to the Uniform Resource Locator (URL) where the media player can be downloaded. When you provide information to users that can be accessed through specific applications or plug-ins, the applications and plug-ins should be accessible.

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. By identifying specific accessibility requirements, you can help the developer creating your style sheets to maintain a specified level of quality with regard to those requirements.

You can edit any style sheets in FrontPage 2002 to suit your own needs, and you can create and use your own style sheets. Note that some earlier browsers may not display all style-sheet attributes, so it is important to verify that your pages still work with style sheets turned off.

Consider an Alternate Accessible Page Only as a Last Resort

Alternative accessible pages should be created only when it is not possible to make the original page accessible. This means that you must make every attempt to make the original page accessible. If you determine that it is not possible to make the original page accessible, then you may create an alternative page that is accessible. The alternative page should provide the page visitor with an equivalent experience, and thus it should be updated as often as the original 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. It also is a good idea to write out the full meaning of an acronym the first time it is used (and identify the acronym itself parenthetically).

Strive for User-Friendly 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 easily.

When creating a hyperlink, use text that is descriptive. For example, the phrase "Click here" or other non-descriptive text is not as helpful to the user as "Go to the Microsoft home page."

Strive for a clear, consistently positioned navigational structure for your site. Not only does it make the site accessible, but it also is 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.

Provide Descriptive Text for Frames

Accessible Web content can include frames. However, the frames must have descriptive text so that users with browsers that do not support frames can access them. As an alternative to frames, you can use tables. Using tables, you can achieve the same effect as using frames, and it is likely that all browsers support tables.

Provide a NOFRAMES Version of Frames Pages

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

If you use a FrontPage frames template page as the base for your frames page, FrontPage creates a NOFRAMES page for you. Complete that page with the information conveyed by the frames page so users who are using technologies that do not support frames can access the same information.

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 2002 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.

Use Inline Frames with Alternative Text

FrontPage 2002 supports accessible inline frames, or i-frames. I-frames should have alternative text and titles, just as frames should. Because some browsers and assistive technologies do not support i-frames or frames, the alternative text should provide the page visitor with the information that is contained in the i-frame element.

Use Metadata to Enhance Accessibility

The use of metadata is included in W3C's accessibility recommendations because metadata makes documents easier to find and use. Metadata enhances accessibility, while also enhancing usability for everyone. Metadata can give the user preliminary information about the document, such as the language, author, subject, title, owner, purpose, age appropriateness, keywords, and more. Metadata carries unlimited potential. It can make use of an unlimited number of fields, or metatags.

Be sure to take advantage of the title, keywords, and description metatags. These three metatags are standard to many search services and engines. Search engine crawlers often place a high priority on these metatags and their metadata values.

Other Resources

The importance of accessibility standards has been recognized around the world, and other resources are available for those who want more information on developing accessible Web pages:

  • The U.S. Access Board has issued a set of standards for Web-based information in a document called the Electronic and Information Technology Accessibility Standards, which was published in accordance with the Rehabilitation Act Amendments of 1998.
  • To learn more about Microsoft's efforts to support this act, see Microsoft and Section 508 on the Accessibility Web site.
  • W3C has developed a set of universal guidelines for Web development. The guidelines have been published in a document titled, Web Content Accessibility Guidelines 1.0, which is available on the W3C Web site.
  • Microsoft has put together more information about accessible Web design guidelines. This information can be found online at Accessibility on the MSN Web site.
  • Microsoft has formed a strategic relationship with HiSoftware, a developer of Microsoft FrontPage add-ins. HiSoftware offers accessibility solutions that are available as stand-alone products, server-based products, and FrontPage add-ins. AccVerify™ SE for FrontPage can help you make your Web content accessible and user-friendly by verifying compliance with industry accessibility standards. To download AccVerify SE for free, see the HiSoftware Web site. To learn more about the strategic relationship between Microsoft and HiSoftware, see Microsoft Announces Strategic Relationship To Offer HiSoftware's New Web Site Accessibility Verification Tool For FrontPage on the PressPass Web site.

In Conclusion

Web surfing no longer is limited to users who 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 2002 enable you to build an accessible Web site. FrontPage 2002 supports 100-percent 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.