How to Make Accessible Web Content Using FrontPage
Article Contents
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 (F8). A dialog box will appear with several options:
- : You can choose to check all pages in the site, all open pages, selected open pages, or the page you are currently working on.
- : 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.
-
:
- . Definite accessibility problems, similar to the issues marked in red in the Wave - external link.
- . Possible accessibility problems, similar to the issues marked in yellow in the Wave - external link.
- . This is a list of potential accessibility problems that this checker cannot detect, but should be checked by the developer.
Once you have chosen your preferences, select the 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 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.
Choose the snippet you want to insert, 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 (Alt + T, A), then select the tab and then the button. A box will open with three fields:
- : This should be a one word description of the snippet.
- : You can add a longer description of the if you choose to.
- : 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 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. on the image and select , or with the image selected, press Alt + Enter. Then enter the alternative text in the field under . If you would like to add empty alt text for spacer images and other unimportant graphics, check the box next to the 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 field. You will have to create a simple HTML page with the the long description yourself.
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 toolbar is visible ()
- Use the Rectangle, Circle, or Polygon Hotspot tool to create hotspots on the image where you want links.
- The window will open after each hotspot is created. Select the button labeled . A dialog box will appear with where you can enter the
alttext. Although this prompts you for ScreenTip text, it really enters thealtattribute.
Important
If you have Frontpage 2000 or earlier, you will have to enter alt text for hotspots in the code view.
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. on the cell, then select or select . When the dialog box appears, select the check 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 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 . FrontPage has now associated the text label with the form element. Repeat for all of your form elements.
- Sometimes FrontPage's 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.
- You are prompted to add a title when you save each frame.
- on the Frame and choose . A dialog box will appear with several fields. Type the descriptive title into the field labeled .
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 toolbar.
Advertisements
WebAIM is an initiative of:
