|
How to Make Accessible Web Content Using Frontpage 2000
1. IntroductionFrontpage 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). 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. 2. Enhancing the Accessibility Features of Frontpage 20002.1 Change the default template to one that is validThe 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:
<!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. 3. Using the Program3.1 Create accessible templates and add content within themOne 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 WYSIWYG3.2.1 Alt tagsAlt 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 linksTo 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 HeadersCreating 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.
See the Tables Tutorial for more information. 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.
HTML Code Example: 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.
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. 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-dataFrontpage'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
HTML code example with label, id, fieldset, and legend information
in bold, followed by rendering: 3.3 Features NOT available through the WYSIWYG3.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. |
This Tutorial is reproduced on this site with the kind permission of WebAIM. For additional information and resources on web accessibility please visit http://www.webaim.org.
© Copyright 2000-2001 WebAIM. All Rights Reserved. Terms of Use.
View
printer-friendly version.
