How to Make Accessible Web Content Using FrontPage

Article Contents

  1. Introduction
  2. New Accessibility Features in FrontPage 2003
    1. CSS support
    2. Improved XHTML support
    3. Accessibility evaluator
  3. Creating Accessible Content
    1. Change the default template to one that is valid
    2. Adding alt attributes to images
    3. Creating accessible client-side image maps
    4. Defining table headers
    5. Adding labels to form elements
    6. Giving titles to frames
    7. Adding headings and subheadings

Introduction

FrontPage is one of the most popular HTML editors on the market. There are several reasons for this:

  • The price is relatively low when compared to Dreamweaver or many other editors.
  • Its MS Office interface will be familiar to many people.
  • It has a powerful spell checker and other proofing tools.
  • It integrates with Office products like Word.

Just like every tool, FrontPage does have its weaknesses:

  • The default template you use when starting a new web page is not compliant with HTML standards (more on this below).
  • Changing an element's properties can sometimes take several steps.
  • Some basic accessibility features must still be added manually (more on this below).

Despite some of these shortcomings, it is definitely possible to create accessible web pages in FrontPage, often without leaving the WYSIWYG environment.

Note

Though many of the accessibility features are the same, this article focuses on FrontPage 2003 and not on previous versions.

New Accessibility Features in FrontPage 2003

CSS support

CSS (Cascading Style Sheet) support has been greatly improved in FrontPage 2003. Not only can you use layers for CSS layout, but you can also create CSS-based templates and themes. You can also preview your CSS-based layout in the design view.

Improved XHTML support

Frontpage offers improved, but incomplete, support for XHTML. While there are are no features to actually create XHTML pages in the WYSIWYG view, FrontPage incorporates XHTML elements, like lowercase tags and the use of CSS for layout. You can also create XHTML documents in code view as well as edit XHTML documents created in another program.

Accessibility evaluator

FrontPage includes an accessibility evaluator. To use it, click on Tools > Accessibility (F8). A dialog box will appear with several options:

  • Check where: You can choose to check all pages in the site, all open pages, selected open pages, or the page you are currently working on.
  • Check for: You can choose to evaluate your page(s) according to WCAG Priority 1 guidelines, WCAG Priority 2 guidelines, Section 508 standards, or all of them.
  • Show:
    • Errors. Definite accessibility problems, similar to the issues marked in red in the Wave - external link.
    • Warnings. Possible accessibility problems, similar to the issues marked in yellow in the Wave - external link.
    • Manual Checklist. This is a list of potential accessibility problems that this checker cannot detect, but should be checked by the developer.
screenshot of an accessiblity report

Once you have chosen your preferences, select the Check button. FrontPage will generate a report that lists the page name, line number, checkpoint and summary. From here, you can either review the issues in the report window or you can generate an HTML version of the report by selecting the Generate HTML Report button. The HTML Report feature creates a more visually-pleasing, checklist-style report that you can save and review later.

Creating Accessible Content

Many of the following accessibility techniques are possible in the WYSIWYG environment, but sometimes it is necessary to make the changes to the HTML code itself. Before FrontPage 2000, you would sometimes make a change to the code, only to have FrontPage change it back. This isn't really a problem anymore, but if you are using a pre-2000 version of FrontPage, upgrading will provide you with many additional accessibility features.

Important

Unless it is indicated that a feature is new to FrontPage 2003, all of the following techniques are possible in FrontPage 2000 through 2003.

Change the default template to one that is valid

One of the strengths of FrontPage is its ability to create templates. When you create an accessible template, you can reuse the same template for your whole site (or at least for the appropriate parts of your site). By reusing templates, you only have to worry about the parts of your site that are not included in the generic template.

Many web developers use scripting languages such as Java Server Pages, PHP, Perl, Cold Fusion and others to create templates. These languages allow for great flexibility and programmability—much more than FrontPage's template and theme features. Still, the concept is the same: use templates, and make them accessible.

The default blank page that displays when you start FrontPage 2003 does not have any direct accessibility issues, but it is not standards-compliant, valid HTML. There are three things you can do to change this.

Add a DOCTYPE declaration using shortcuts

Microsoft suggests that you can create a valid template by adding a DOCTYPE declaration using built-in code snippets. The DOCTYPE declaration tells the browser what version of HTML (3.0, 4.01, XHTML 1.1, etc.) to use. This is a necessary element in any accessible web page template, but there's more to a standards-compliant template than a DOCTYPE. Even though this technique offers an incomplete accessibility solution, it is a step in the right direction.

To insert a code snippet, make sure you are in code view. Position the cursor where you want to insert the new code (in this case, it will be at the very beginning, before the <html> tag. Press Control + Enter and a dropdown list will appear.

screenshot of the dropdown list of code snippets

Choose the snippet you want to insert, dt4 for example, and that bit of code will be inserted.

Change the default template

The default web page template (normal.htm) is normally located in the templates directory of Microsoft Office. On most computers, the document is located in the C:\Program Files\Microsoft Office\Templates\1033\Pages\normal.tem directory. The file you need to change is named normal.htm. Open this document in a text editor of some sort (Notepad, Wordpad, BBEdit, or something similar). Then change the template to something that is (X)HTML compliant:

The template will vary based on the (X)HTML syntax version you choose—HTML 4.0 Strict, HTML 4.01 Transitional, XHTML 1.0 strict or XHTML 1.0 transitional, etc. There is a syntax for every HTML and XHTML specification. Just make sure the template you choose is standards-compliant by running it through the W3C HTML validator - external link.

The normal.htm template is only used when you create a blank page that has not been assigned a template or theme. If you are using either of these FrontPage features, you will need to edit the template pages for those items. These template files should be located in the same directory as the normal.htm template described above.

Create multiple templates

This technique is a combination of the two previous techniques. If you know that you will be using more than one version of HTML, then you can create multiple templates, one for each HTML version you plan to use. There are two methods for doing this:

First, create a web page template in FrontPage or in a simple text editor for each version of (X)HTML you want to use. Then, when you want to create a new page, simply open the appropriate template instead of creating a new page.

The second option is the same as the first, except you save each of the new templates as a code snippet instead of an HTML file. To create a new code snippet, go to Tools > Page Options (Alt + T, A), then select the Code Snippets tab and then the Add button. A box will open with three fields:

  • Keyword: This should be a one word description of the snippet.
  • Description: You can add a longer description of the if you choose to.
  • Text: This is where you enter the new template code, or whatever piece of code you frequently use.

You can then add them to your code in the same way mentioned previously (Control + Enter in Code view).

Important

Even if you plan on using this method, you should probably still change the default template to the syntax you use most often. That way you can be sure your page, at the very minimum, will be compliant with the specified version of HTML

Adding alt attributes to images

Adding alt attributes to images is easy in FrontPage. Right-click on the image and select Picture Properties, or with the image selected, press Alt + Enter. Then enter the alternative text in the Text field under Alternative representations. If you would like to add empty alt text for spacer images and other unimportant graphics, check the box next to the Text field but leave the field blank. You can only add empty alt text in Frontpage 2003.

FrontPage 2003 (but not earlier versions) supports the longdesc attribute. If an image is too complex to describe with simple alt text, you can link to a page that provides a long description by entering the URL in the Long Description field. You will have to create a simple HTML page with the the long description yourself.

Screen shot of the Picture Properties dialog box, highlighing the location to input the alt text

Creating accessible client-side image maps

To create an accessible client-side image map, follow these steps:

  • Insert the image into your web page.
  • Make sure the Pictures toolbar is visible (View > Toolbars > Pictures)
  • Use the Rectangle, Circle, or Polygon Hotspot tool to create hotspots on the image where you want links.
  • The Create Hyperlink window will open after each hotspot is created. Select the button labeled ScreenTip. A dialog box will appear with where you can enter the alt text. Although this prompts you for ScreenTip text, it really enters the alt attribute.

Important

If you have Frontpage 2000 or earlier, you will have to enter alt text for hotspots in the code view.

screenshot of the hotspot dialog box highlighting the ScreenTip button and dialog box

You can add alt text to an existing hotspot by double-clicking the hotspot and following the steps above. Remember that hotspots should NEVER have empty alt attributes—let the user know what the hotspot displays and where the link will take them. The main image MUST also have an alt attribute, but it can be empty (alt="") if it does not convey any new information.

Defining table headers

To define a table header for data tables in FrontPage, select the cell you want to make a header. Right-click on the cell, then select Cell Properties or select Table > Properties > Cell. When the Cell Properties dialog box appears, select the Header cell check box.

Screen shot of the header checkbox in the cell properties dialog box.

If the table is just used for layout (not a true data table), then there is no need to specify table headers.

Adding labels to form elements

  • Create your form using the Insert > Form menu.
  • Each form element (text box, radio button, checkbox, or drop-down menu) should have descriptive text that informs the user what to enter or select. Put the label adjacent to the form element (though it technically can go anywhere in the page).
  • Click and drag and select the form element AND its descriptive label. Go to Insert > Form > Label. FrontPage has now associated the text label with the form element. Repeat for all of your form elements.
  • Sometimes FrontPage's Label option is not enough - labels often are not adjacent to the form elements (if you use tables for layout). Changes to labels that are not adjacent to their form elements must be done in HTML view

Giving titles to frames

A frameset is a web page which defines a collection of at least two other separate web pages, which are combined in the same visual space. Visual users usually experience framesets as a cohesive entity. They can scan the contents of multiple pages all at once.

Those using screen readers cannot quickly scan the contents of multiple pages. All the content is experienced in a linear fashion, one frame at a time. Frames are not inaccessible to modern screen readers, but they can be disorienting. One of the most important things you can do to increase the accessibility of frames is to give each frame a title.

Note

This feature is new to FrontPage 2003.

There are two different ways to add titles to your frames.

  1. You are prompted to add a title when you save each frame.
  2. Right-click on the Frame and choose Frame Properties. A dialog box will appear with several fields. Type the descriptive title into the field labeled Title.
screen shot of the Frame Properties dialog box, highlighing the location to input the title

Adding headings and subheadings

Remember to use actual headings (h1-h6) to structure content, and not text formatting, such as font size or bold to give the visual appearance of headings. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Items that are bolded or display in a bigger font are not interpreted to be structural elements.

When the cursor is in a line of text, you can select what type of text it should be, whether a paragraph, heading 1, heading 2, etc. This can be done from a dropdown list at the far left side of the of the Formatting toolbar.

screenshot of the heading drop-down menu.

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University