How to Make Accessible Web Content Using Frontpage 2000
1. Introduction
Frontpage 2000, like many other web editors, can be used to
create accessible web content. Many accessibility features can be added
from Frontpage 2000's main interface. However, some accessibility fixes
can only be done by changing the HTML code directly. Fortunately, Frontpage
2000 makes it relatively easy to edit the code. In addition, the Frontpage
application has been updated so that it no longer "fixes" your HTML when
you make a change to the code.
Here is a summary list of the features that either are or
aren't available in the graphical interface (WYSIWYG interface: What You
See Is What You Get).
Edits that CAN
be done
from the WYSIWYG interface  |
Edits that CANNOT
be done
from the WYSIWYG interface  |
| |
|
Each of the above items will be explained in some detail.
Before I do this, however, I want to describe some of the things that
you can do to enhance the accessibility features of Frontpage 2000.
Return to top.
2. Enhancing the Accessibility Features of
Frontpage 2000
2.1 Change the default template to one that is valid
The default blank page that comes with Frontpage 2000 is not inaccessible
per se, but it is incomplete as far as valid
HTML is concerned. The default page template is likely located in the
templates directory of Microsoft Office. On my computer, 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, Simpletext,
or something similar). Then change the html inside of that file to look
something like this:
[skip over HTML markup]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
This is not the only valid template. The template
above is for documents which are meant to be valid according to the HTML
4.0 Transitional syntax. There is also a 4.0 Strict syntax, an XHTML 1.0
syntax, and others—there is a syntax for every HTML and XHTML specification
from 1.0 all the way to the current version.
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 templates should be located near the normal.htm template
described above.
Return to top.
3. Using the Program
3.1 Create accessible templates and add content within
them
One of the strengths of Frontpage is its ability to create templates.
When you create a disability-accessible template, you can reuse the same
template for your whole site (or at least for the appropriate parts of
your site). Once you do that, you just have to worry about the parts of
your site that are not a part of the generic template.
There are other ways of creating templates. Many Web developers use scripting
languages such as Java Server Pages, PHP, Perl, Cold Fusion and others
which allow for great flexibility and programability--much more than Frontpage's
template and theme features. Still, the concept is the same: Use templates,
and make them accessible.
3.2 Features available through the WYSIWYG
3.2.1 Alt tags
Alt tags are easy to add to images in Frontpage. Right click on the image
and select Picture Properties. Or with the image selected, press Alt +
Enter. Either of these actions will cause the Picture Properties dialog
box to pop up. You can then enter the alternative text in the "Text" field
under Alternative representations.
However, if you want to add an empty alt tag (for spacer
images and other unimportant graphics, you have to go into the code and
type alt="".
3.2.2 Adding a method to skip over long lists of links
To do this, you just need to create a text link with the appropriate
text (e.g. "skip to main content"), then create an anchor for the link
to jump to. To create an anchor, place the cursor at the location where
you want the link to jump to then select Bookmark from the Insert menu.
3.2.3 Adding Table Headers
Creating a table header is simple in Frontpage. Select the cell you want
to make a header. Right click on the cell, then select Cell Properties
or select Properties then Cell from the Table drop-down menu. When the
Cell Properties dialog box appears, mark the Header cell check box.
If the table is just used for layout (not a true data table), then there
is no need to specify table headers or to associate the cells with the
headers.
Example Code with table headers in bold, followed by rendering:
<table border="1" width="100%">
<caption>Annual rainfall and snowfall</caption>
<tr>
<td width="33%"> </td>
<th width="33%">Rainfall</th>
<th width="34%">Snowfall</th>
</tr>
<tr>
<th width="33%">January</th>
<td width="33%">1</td>
<td width="34%">2</td>
</tr>
<tr>
<th width="33%">February</th>
<td width="33%">3</td>
<td width="34%">4</td>
</tr>
<tr>
<th width="33%">March</th>
<td width="33%">5</td>
<td width="34%">6</td>
</tr>
</table>
Annual rainfall and snowfall
| |
Rainfall |
Snowfall |
| January |
1 |
2 |
| February |
3 |
4 |
| March |
5 |
6 |
See the Tables Tutorial
for more information.
Return to top.
3.2.4 Providing redundant text links to server-side
image maps.
There is no special place in the interface to do this. You simply type
in the text for the links, then create the hyperlinks. One common way
of creating redundant links is to place the image map first, then place
the text links below the image map. See http://www.byu.edu/ for an example of this
technique.
3.2.5 Creating client-side image maps rather than server-side
image maps.
When you select an image, the image menu appears. You can use the hotspot
shape tools to create hyperlink hotspots on the image. Frontpage only
create client-side image maps. Unfortunately, Frontpage does not provide
a way in its WYSIWYG interface to add alt tags to the hotspots. You must
manually add them in the HTML code.
- Insert your 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.
Add the page you want to link to in the URL textbox.
- Your image map will now work, but to make it accessible, you need
to add ALT attributes.
- To add ALT attributes to your hotspots, you'll need to go to HTML
view. Find the AREA tags that define your hotspot coordinates and add
the ALT attribute to each one. Make sure the ALT information is descriptive.
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. Unless it conveys
content that is not available in the hotspot ALT attributes, the ALT
of the main image can be empty (ALT=""). If it is empty, you will need
to add it in HTML view.
- HINT: The MAP tags and their contents can be anywhere within your
web page. Most developers put this extra code toward the bottom of their
page so that the content will download and display faster.
HTML Code Example:
<p><img border="0" src="globe.gif"
width="196" height="195" usemap="#FPMap0" alt="Map of Globe">
</p>
<map name="FPMap0">
<area href="http://northamerica.com/" coords="53, 22, 143, 81" shape="rect"
alt="North America with link to northamerica.com">
<area href="http://southamerica.com/" shape="circle" coords="124, 118,
37"
alt="South America with link to southamerica.com"></map>
</body>
</html>
3.2.6 Changing the contrast of a page or element.
You have full control over the color of the page, tables, font, and other
elements.
3.2.7 Controlling the destination of links (to avoid
opening up new windows).
Frontpage allows you to select the destination of links (e.g. new windows,
certain frames, etc.). The default is to open the link up in the same
place as the preceding page.
Return to top.
3.2.8 Marking up quotations.
There is an easy way to markup a section of text as a quotation using
the <blockquote> tag. Unfortunately, Frontpage uses an icon that
gives the false impression that the <blockquote> element is meant
to be used for indentation purposes. In reality, this tag should only
be used to set aside quotations. Nevertheless, the tag is available from
the WYSIWYG, as long as you know what you're looking for.
3.2.9 Creating valid lists.
Frontpage has no problem creating simple bullet and numbered lists. However,
when you nests lists using the indent buttons, Frontpage requires you
to indent for each nested list. When you click the indent only once, Fronpage
creates a new paragraph tag within the list instead of another list tag.
3.2.10 Using relative size units (e.g. for tables)
rather than absolute sizes.
Frontpage allows you to use either percentages or pixels when determining
the size of and element (e.g. table cells). Whenever possible, use percentages
units of measure.
3.2.11 Adding headings and subheadings.
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.
3.2.12 Creating templates that can be used across
pages (so that you can have a consistent navigational scheme and style
of presentation).
This feature of Frontpage takes a little bit of time to learn, but it
may save you some headaches by allowing you to reuse portions of your
HTML. This cuts down on development time and provides a way to create
a consistent navigational scheme and style of presentation across pages.
This feature has limitations, though. For example, if you use a tab-style
interface in which the tabs change color depending on the page that you
are on, you cannot use the template to code that portion of the page (if
you did, the tabs would not change color). More sophisticated methods
of templating may be appropriate, such as using PHP, JSP, and the like.
Return to top.
3.2.13 Providing transcripts for videos or audio clips
(you have to do the work, but you can type it into the WYSIWYG page).
To say that you can do this in Frontpage's WYSIWYG interface is probably
a bit misleading. By categorizing it here I am simply saying that you
can type text into the page using the WYSIWYG editor. You still have to
do the typing of the dialog and narration in the video or audio clips.
You cannot do captioning (putting the text within the video itself) using
Frontpage.
3.2.14 Adding the TABINDEX feature.
The TABINDEX attribute allows you to specify the order in which a user
will tab through the elements on your page. Fronpage allows you to set
the tabindex for form elements using the element's properties dialog box.
To set the tab order of a link, you must edit the HTML code manually.
3.2.15 Adding Meta-data
Frontpage's WYSIWYG editor provides a simple dialog box to input meta-data
on your page. The input controls can be found on the Custom tab of the
Page Properties dialog box.
3.2.15 Adding Labels to Form Elements
- Create your form using the Insert… Form menu. Make sure your
form works correctly, because edits in FrontPage will often undo code
you have added in HTML view.
- 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… and select 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). Time
to get 'under the hood'.
- Go to HTML view. Find a form element (INPUT or SELECT tag) and add
an ID attribute to it. The ID can be any one word to uniquely identify
this form element. Descriptive ID's are helpful (making the ID the same
as the descriptive text makes finding them easier).
- Now find the descriptive text for that form element and put the <LABEL
FOR="ID"> tag in front of it. ID should be the ID value for the associated
form element. Put a closing </LABEL> tag after the descriptive
text. Labels are usually only one or two words. If you have instructions
or other information, only put the key identifying words inside the
labels (i.e., name, address, age, etc.).
- FrontPage's label feature works quickly, but the id values are very
cryptic. Adding your own labels and id's will ensure they are accurate
and easy to edit.
- If you have a drop-down menu, only the select tag needs a label, not
each option within the menu. Buttons also do not need labels, but make
sure the button text is descriptive.
- You can use the <FIELDSET> and <LEGEND> tags to group
form items. Internet Explorer surround FIELDSETS with a border and inserts
the LEGEND test into the border (see below). The LEGEND tag must immediately
follow the FIELDSET tag and both tags must be properly closed. FIELDSETs
can also be nested within other FIELDSETs, as shown below.
HTML code example with label, id, fieldset, and legend information
in bold, followed by rendering:
<form method="POST" action="myscript.cgi">
<fieldset><legend>Personal Information</legend>
<p><label for="name">Name:</label> <input
type="text" name="T1" size="20" id="name"></p>
<p><label for="state">State:</label> <select
size="1" name="D1" id="state">
<option selected value="ID">Idaho</option>
<option value="UT">Utah</option>
</select></p>
<fieldset><legend>Gender:</legend>
<input type="radio" value="M" name="R1" checked id="male"><label
for="male">Male</label><br>
<input type="radio" value="F" name="R1" id="female"><label
for="female">Female</label>
</fieldset>
<p><input type="submit" value="Submit"><input type="reset"
value="Reset"></fieldset>
</form>
Return to top.
3.3 Features NOT available through the WYSIWYG
3.3.1 Adding alt tags for images maps and Java applets.
Frontpage 2000 does not provide a way in its WYSIWYG interface to add
alt tags to the hotspots of image maps or to Java applets. You must add
these tags by editing the HTML code.
3.3.2 Adding empty alt tags for decorative images,
spacer gifs, etc.
Sometimes it is appropriate to create empty alt tags (alt="") when the
image is purely decorative ("eye candy") or otherwise not essential to
someone listening to the page with a screen reader. There is no way to
create an empty alt tag in Frontpage. You have to go into the markup behind
the WYSIWYG.
3.3.3 Adding the LONGDESC attribute.
This tag is poorly supported in browsers, and unsupported in Frontpage's
WYSIWYG as well.
3.3.4 Associating table headers with data cells (using
ID, HEADERS, SCOPE, AXIS, etc.)
Although you can create table headers, you can't associate the cells
with the headers. This is unfortunate, because screen readers can't match
the cells with their headers without this information. You have to go
into the markup to do this (see the WebAIM tables tutorial for more information about
headers and cell associations).
3.3.5 Adding alt tags for embedded plug-ins.
You just have to go into the code and add the alt tag yourself for plug-ins.
3.3.6 Adding form accessibility features (LABEL, OPTGROUP,
FIELDSET and LEGEND).
None of the form accessibility features (except limited functionality
of LABEL) are available from the WYSIWYG. See the WebAIM tutorial on forms
for more information.
3.3.7 Captioning videos.
Captioning usually requires specialized software and/or hardware. MAGpie is a utility that
speeds up the process somewhat.
3.3.8 Checking for colorblindness compatibility.
The best utility for doing this is found at http://www.vischeck.com/. An online
version and a Photoshop plug-in version are both available for free.
3.3.9 Checking the flicker rate of images or animations.
There isn't a utility (that I know of) for doing this. I use this general
guideline: If it has an appearance of a strobe light, or something close,
then chances are that the graphic is dangerous to people who are susceptible
to photoepileptic seizures. The "official" guideline is to avoid flickering
at a rate of 2 to 55 flickers per second.
3.3.10 Giving titles to frames.
Frontpage allows you to create a frameset and content for frames. However,
there is no way to add titles to frames from within the WYSIWYG interface
that I'm aware of.
3.3.11 Identify the natural language of the document,
or changes in the natural language.
You'll have to go into the HTML to do this. To specify the language of
an entire document, you should add the "Lang" attribute to the HTML tag
(e.g. <HTML Lang="en"> means that the document is in English). When
the language changes in the middle of a sentence, you should add the "Lang"
attribute to a "span" tag (e.g. <span Lang="es">Hola</span>
means that the word within the tags is in Spanish). The Lang attribute
can be added to most HTML tags.
3.3.12 Creating ACRONYM tags.
You'll have to do this yourself (e.g. <acronym title="Center for Persons
with Disabilities">CPD</acronym>).
3.3.13 Providing keyboard shortcuts.
This feature is not supported in all browsers either. Go into the HTML
if you want to implement keyboard shortcuts. In general, I don't recommend
using this feature, because the shortcuts you create may interfere with
those of the assistive technologies that some people use.
3.3.14 Providing summaries for tables.
Go into the HTML to provide table summaries. Summaries are not always
necessary, but can aid a person using a screen reader if the table is
particularly complex or difficult to interpret from the data alone.