View TEXT-ONLY version.   Download/Print PDF version .

Introduction to Accessible Design with Dreamweaver MX 2004.

Covers: setting up Dreamweaver for accessible design, creating a site, creating new pages using recognized HTML grammars, and using accessibility features to: insert images with ALT tags, create accessible tables, find and use accessible layouts, set embedded and in-line styles, and check the page for accessibility errors.

Setting Accessible Preferences.

Before you begin designing in Dreamweaver, you should set your preferences to insure that the code will conform to a recognized grammar and that you will be prompted to use the accessibility features as you design. Following the steps below, you will change the Dreamweaver MX 2004 defaults to those settings recommended by the WAC. Note that not all settings may be required to create accessible sites, but are recommended best practice for consistent design.

Preferences -- General

1. From the EDIT menu, choose PREFERENCES (or press CNTRL-U).
2. From the CATEGORY list on the left, select GENERAL.
3. Make sure these two items are "checked":
1. Use <strong> and <em> in place of <b> and <i>
2. Use CSS instead of HTML tags.
   

Return to Contents

Preferences Accessibility

4. From the CATEGORY list on the left, select ACCESSIBILITY.
5. Check all the boxes next to the HTML elements list (Form objects,
Frames, Media, Images).
   

Return to Contents

Preferences Code Format

6. From the CATEGORY list on the left, select CODE FORMAT.
7. Set CENTERING to USE DIV TAG.
   

Return to Contents

Preferences New Document

8. From the CATEGORY list on the left, select New Document.
9. From the drop-down list, select HTML as the default for new documents.
   
10. Choose to Make documents XHTML compliant.
    

Return to Contents

Preferences -- Validator

11. From the CATEGORY list on the left, select Validator.
12. Select the code you are trying to validate too (XHTML 1.0 transitional) and the level of browser support you want to verify (IE & Navigator 4.0 and above).
    

13. Click on the OK button to save all your changes to PREFERENCES.

Return to Contents

Using the Practice Web

If you want to follow-along with this tutorial and build the sample page, you'll need to download and unzip the Practice Web Site Files [zip] (requires unzip software). Unzip the file to a location on your C: drive that you will remember and identify that folder in your site definition (as described below).

Return to Contents

Defining a Site

Dreamweaver is designed to be a web site manager, not just a web page creator. Thus, it works best when you have defined the parameters of your site. Once you do, Dreamweaver will keep track of your links and files to insure that you don't create broken links or links to files that are outside your site folder.

NOTE: Before you begin this step, you need to create a web site folder and an images folder where you will store your site files. For this tutorial, we will create these folders in the MY DOCUMENTS folder on the C: drive.

Return to Contents

Create a New Site.

1. From the SITE menu, choose Manage Sites . . .
2. From the buttons on the right of the site management dialog, choose NEW.
3. In the drop-down choices, select SITE (e.g. create new site).

Unless you have changed the default, Dreamweaver opens a wizard to help you create your site. For this lesson, however, we are going to use the ADVANCED method of site definition.

4. Click on the ADVANCED tag at the top of the SITE DEFINITION dialog box.
5. From the CATEGORY list on the left, select LOCAL INFO.
6. In the SITE NAME box, identify your site (for your use only can be any name).
7. Next to the LOCAL ROOT FOLDER box, click on the image of the yellow folder and navigate to the location on your hard drive or local server where you are going to store your local copy of your web site (folder you already created in MY DOCUMENTS).
8. Next to the DEFAULT IMAGES FOLDER box, click on the image of the yellow folder and navigate to the location of your images folder on your hard drive or local server. This folder should be within (beneath) the web site folder you specified above.
9. In the HTTP ADDRESS box, type the URL for the home page of your site.
10. Make sure the box next to ENABLE CACHE is selected.
11. Click OK to save your site and return to design mode.

Return to Contents

Familiarize Yourself with Dreamweaver.

Pictured Above: calloouts identify the main design view, view toggle buttons, properites box, CSS styles box, and site files management windows.

Return to Contents

Creating an Accessible Page

In this tutorial, we will create a sample department page, based on an existing page from the Department of English at Ohio State University. Our page will contain a variety of elements, frequently used by web designers, which require additional coding for accessibility. These include: images both decorative and informational; client-side image maps; tables layout and data; skip navigation link, and in-page (embedded) styles.

Let's begin by taking a look at the page we will create:

Tutorial Page: example.htm

Notice that there are three sections to this page: the header with logo and main navigation, the body with two columns of text, and the footer with links to College and OSU home page and accessibility statement. Don't worry, the text has been provided for you. No need to retype!

Return to Contents

Practice Page

We'll begin by opening a page that contains the content of our final page without any of the necessary formatting. This page is called practice.htm. Here is how the practice page looks:

The header layout table has already been created for you, because it involves a bit more complicated formatting (which will be covered in our next Dreamweaver workshop). Let's begin by creating the other two layout tables for the body and footer and moving the text into those tables.

Return to Contents

Header Information and META Data

It is important to include the proper header information on each of your pages. Dreamweaver sets much of this by default. Header information is placed between the open and close HEAD tags in the HTML document. Header information should include:

• Doctype is short for "document type declaration" (or DTD). Any (X)HTML Web page needs to define a Doctype : it is used to declare which version of (X)HTML the Web page conforms to. It appears as the first line of code on a web page, before the <html> tag.
  
  Example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• The language declaration is an attribute that defines the HTML tag. Language information specified via the lang attribute may be used by a browser to control display in a variety of ways.
  
  Example: <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
• The title appears in the window of the browser and is also used in tracking the HISTORY (BACK button) of where the user has been. It can be particularly helpful when a user has multiple windows open, if it uniquely identifies each page.
  There may only be one title in any document. It should identify the content of the document in a fairly wide context. The title is not part of the text of the document, but is a property of the whole document. It may not contain anchors, paragraph marks, or highlighting. It is not normally displayed in the text of a document itself.
  
  Example: <title>English: American Literature Before 1900</title>
  
  The TITLE can be edited in Dreamweaver using the edit box on the top of the page design window.

• Meta-Description: Some search engines pick up this description to show with the results of searches, instead of showing the first few of lines of the page as the summary. Thus, a description can help users identify the content of your pages when searching, especially when the first lines of your pages consist of repeated content or menus.
  
  Example: <meta name="Description" content="Studies in American Literature Before 1900 in the English Department at the Ohio State University. Period overview." />
• Meta-Keywords: A common use for META is to specify keywords that a search engine may use to improve the quality of search results. When several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user.
  
  Example: <meta name="Keywords" content="areas, study, research, literature, programs, english, ohio, state, university, before 1900, 1900, american,"/>

For more help with header information, see the WAC Best Practices Tutorial: Headers.

Return to Contents

Layout Tables

Layout tables are used solely to distribute content to various areas on the screen. They are different from data tables, which are used to associate like data and help users interpret the data. Layout tables should be as ubiquitous as possible if inserted properly screen readers will ignore these tables and go directly to reading the content they enclose.

To insert a table:

Practice.htm: Place your cursor before the first line of body text ("American Literature Before 1900") and press ENTER this places an empty space on the page. Place your cursor on the new line you just created and insert the body table.

1. From the INSERT menu, choose TABLE. OR use the insert table button on the COMMON toolbar.
2. The TABLE dialog box appears:
   

   Pictured above : callout one -- Best Practice: Table widths defined in percents and less than 100%; callout two -- Layout tables should have no headers; callout three -- Layout tables should not have a caption or summary.

Note: Dreamweaver remembers your last settings used when inserting a table and displays them again.

3. Click OK. Your table appears in dotted lines in your design display.

Once you have inserted a table, you can use the properties box to change the table formatting:

Accessibility tip: Avoid using the properties box to change table background color, border width or color, or background image. Formatting should be done using Cascading Style Sheets whenever possible.

Return to Contents

Data Tables

Data tables require special handling to be created accessibly. Most important, data tables need clearly defined header cells, which help screen readers identify which data belongs in which column and which row of data is currently being read. Dreamweaver makes it easy to create simple, accessible data tables.

Insert a Data Table

The steps for inserting an accessible data table are the same as those for inserting a table (see above). However, you need to add more information in the table dialog box.

Pictured above : Callout one: Data tables require both row and column headers. Callout two: Best Practice: include a caption/title. Callout three: Data tables must have a summary. Avoid lengthy details.

OSU Standard: Data tables must have row and column headers and a summary.

Summaries should be as brief as possible (because they will be read each time the screen reader encounters the table on the page) and should not repeat information that is in the caption or description that appears within the body of the page. If a detailed explanation of the data appears in the body text, the summary can be much shorter (e.g. "Clinical research results by unit, cost, and outcome."). For our example table, we need a slightly more detailed description:

A collection of professional societies and associations in fields related to Early American Literature. Includes society name (with link), description, and conference information.

Headers can be created in two ways. For simple tables, the cell that contains the header is designated by the <TH> tag in HTML. To assign a cell as a header cell in Dreamweaver, check the "Header" box in the PROPERTIES window.

The more complex method of assigning table headers uses the "headers" and "id" attributes to specifically associate a particular data cell with its header or headers. This method is required for tables where a cell has two or more logical levels of headers and is covered in our intermediate tutorial.

Practice.htm: Be sure to add your column headers "Organization", "Description", "Conference" before cutting and pasting the data into the data table.

Return to Contents

Images and ALT tags.

Every image decorative, informational, or functional (button) needs to have an alternative description or ALT tag, which a screen reader uses to convey information about the image. Because these descriptions are read each time the image is detected, they should be kept short (64 characters or less). When a longer description is needed, designers can use the "longdesc" attribute to point to a page where more detailed information about the image or graphic is provided.

Types of images:

Image Links (buttons/logos): When the image is "clicked," a link is activated. In these cases, the ALT tag also serves as the link description and must follow the same guidelines for good link text. Don't use repeating phrases like "click here" or "go." Avoid vague descriptions such as "link" or "main." It is also usually not a good idea to rewrite the URL of the link in the ALT tag.

Our two image links appear at the bottom of the Practice.htm page. The ALT tags are "College of Humanities" and "The Ohio State University" the same as the link text that appears below each image.

Accessibility tip: When using both an image-link and text-link leading to the same location, wrap the <A> tag around both the <IMG> and the text to avoid having the link appear twice on a link list for the page.

Decorative Images: Images used to add color, visual interest, or design to the site do not need descriptive ALT tags. Instead the ALT tag for these images should be empty (alt=""). Screen readers ignore images with empty ALT tags, as if they did not exist. Examples of decorative images include divider lines, boxes, fillers or placeholders, borders, corners, and backgrounds.

Accessibility tip: Make your default choice the "empty" ALT tag. Then go back and add ALT tags to only those key graphics that add content or function as well as visual appeal.

Informative/Functional Images: Graphs, charts, logos, pictures, product snapshots, scans of books or other materials, covers, drawings of course materials, and many, many other images used on web sites that convey information require descriptive ALT tags that convey the same information in text to visually impaired readers.

Some informative or functional images require only simple descriptions (e.g "President Holbrook addresses graduates."). However, more detailed and complex images may require lengthy descriptions. These more detailed descriptions should be placed on a separate HTML page and should be linked using the LONGDESC attribute in the IMG tag. For examples of the LONGDESC, see the WAC Best Practices Tutorial: Images online.

Image Maps: Client-side image maps are an easy way to assign different "clickable" or "actionable" areas on a single image. For example, in an image on the top of a department page: clicking on the left-side of the image leads to the department home page, clicking on the middle to the department contact, and clicking on the right directs you to the accessibility page. Each map area must have its own alternate text. You should also assign an ALT tag to the image itself, behind the map.

Usability tip: Use caution when inserting image maps to avoid "mystery meat navigation" where users must guess which part of the map leads to which location or must search to find the clickable area on a given image.

OSU Standard: All non-text elements need an alternate description. These include images, graphs, charts, videos, sound files, and flash movies. Videos and movies require both a transcript (ALT text) and captioning (assistive technology).

Insert an Image

1. From the INSERT menu, choose IMAGE. OR use the insert image button on the COMMON toolbar.
2. The SELECT AN IMAGE dialog box appears:
   

   Pictured above: Select Image Source dialog box. Call out: Check that image locations are relative to the document, not the site. This will insure the portability of your site and pages.

3. If necessary, navigate to your images folder. Choose the image file you want to insert. Click OK to insert the image.
4. The IMAGE TAG ACCESSIBILITY ATTRIBUTES dialog box now appears. In the "Alternate text" box, type the image description in the box OR use the drop-down menu to choose an "empty" ALT tag for decorative or non-essential images. If needed, type the URL where a longer description of the image is located in the "Long Description" box. Otherwise, leave the box blank. Click OK to return to design mode.
   

5. You can alter the ALT tag at any time using the PROPERTIES window.
   
   However, you can only change the LONGDESC in the code window.

Create an Image Map

1. Begin by inserting the image (as described above) on which you will draw the map. Give the image an ALT tag and add a default link location, in case the map does not work.
2. With the image selected, choose a map shape from the PROPERTIES window.
   
3. Use your mouse to draw the shape hotspot area on the image. Dreamweaver puts a light blue box over the area to show you the location of the hotspot.
   

   Pictured above: Call out one: Image hotspot has been defined. Call out two: This ALT text serves as the link description for screen readers. Call out three: When hotspot area is clicked, this link will be activated.

4. Once you have finished drawing and labeling all your map areas, click on the black arrow in the PROPERTIES box to return to design mode.

Return to Contents

Skip Navigation Links

Many web designs employ a set of repeated navigation links that appear at the top or to the left side of the page. Whenever the page is loaded or reloaded, screen readers must read all of this repeated content before getting to the main content at the center of the page. An in-page link (also called a bookmark or anchor) gives the user a quick way to "jump over" or "skip" this repeated navigation and jump to the main body of the page.

Since skip navigation links are primarily for use by visually impaired users browsing with a screen reader, they do not have to be visible or accessible to other users (although they may be). Many designers hide the skip navigation link using an invisible GIF or by coloring the text of the link the same color as the background. Our practice site uses an invisible GIF.

OSU Standard: A method shall be provided that permits users to skip repetitive navigation links.

Insert a Skip Navigation Link

There are two parts to a Skip Navigation link: the link and the anchor where the link is pointed to. It is usually a good idea to insert the anchor first, then create the link.

Insert an Anchor

1. Place the cursor at the beginning of the page content where you want the link to "jump" to.
2. From the INSERT menu, choose NAMED ANCHOR.
   OR press CTRL + ALT + A on the keyboard.
3. The NAMED ANCHOR dialog box appears. Name the anchor (e.g. "content") and press OK.
   
4. An anchor symbol appears in the design view where the anchor is located. Note: this is for designer reference only. The anchor will not appear on the web page.

Insert a Link to the Anchor

5. Place the cursor at the beginning of the page, as close the BODY tag as possible (use the CODE VIEW, if needed).
6. From the INSERT menu, choose IMAGE. OR use the insert image button on the COMMON toolbar.

7. Select the invisible GIF file (accessibility_image.gif) [you must create this file outside of Dreamweaver using a picture/image editor software, such as Fireworks or Photoshop].
8. In the IMAGE TAG ACCESSIBILITY ATTRIBUTES dialog box type the ALTERNATE DESCRIPTION: "skip navigation".
9. In the PROPERTIES box, in the LINK box, type the location of the anchor preceded by a pound sign: "#content". The pound sign indicates an in-page link.
   

Return to Contents

Formatting with Style Sheets

Style sheets are the preferred way to add formatting to your web pages, because styles offer the most formatting control for the designer and the most flexibility for the user.

Return to Contents

What is CSS?

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements and are normally stored in a separate file (###.css) and linked to the HTML document that uses those styles. Multiple style definitions will cascade into one, allowing users to customize their experience with your web pages without interfering with the content.

Return to Contents

Forms of Styles

Cascading styles can be created in several different forms.

In-line styles: appears inside the HTML element. For example to center some text, you may choose to use the "align" formatting attribute inside the P element.

<p align="center">This text will appear centered.</p>

Internal styles: style definitions are stored in the HTML document, located between the HEAD element tags. For example, if you wanted the body of your page to have a blue background and your text to be yellow, you might have a style that looks like this:

<head>
<title>Page with embedded styles</title>
<style>
<!--
body { color: #FFFF00; background-color: #000080 }
-->
</style>
</head>

External Style Sheet: style definitions are stored in a separate CSS file (name.css). In the HEAD element of the style sheet is linked to the document.

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>

Browser Default: no styles are defined. Pages will use the settings customized by the user or the default settings included with the browser software.

This tutorial uses the internal or embedded styles. Linked styles are a better option for site management to insure consistency across pages. However, linked styles requires more knowledge of CSS design. For more, see the WAC handout: "WAC Workshop: Cascading Style Sheets." You can practice building CSS online using the excellent W3Schools CSS tutorial.

Return to Contents

Create a New Embedded Style

Managing styles in Dreamweaver requires that you have the DESIGN window open and available. If you do not see this window, from the WINDOW menu, choose CSS STYLES or press SHIFT + F11 to toggle the window open and closed.

CSS Styles Design Window

Practice.htm: Note that some styles have already been created for you in the practice file. These styles format the menu links at the top of the page and require more advanced knowledge of CSS to create. For this tutorial, you will need to redefine the BODY and H1 tags and create one customized style: .piccaption.

1. From the TEXT menu, choose CSS STYLES and NEW…
   OR click on the new style button in the DESIGN window.

2. The NEW STYLE dialog box appears.
   

3. In "Selector Type" choose either "Class" (which creates a custom style) or "Tag" (which redefines an existing HTML tag H1, H2, UL, IMG, and etc.). The "Advanced" option is discussed in our intermediate tutorial.
4. In the "Tag" box:
   • If Type="Class", give the style a unique name beginning with a period and with no spaces or special characters. Examples: .menuitem, .indent, .textdarkred, .makebigger
   • If Type="Tag", select the HTML tag you wish to redefine from the drop-down box next to the input box. Note: the BODY tag is a special tag that represents the default for the entire page. It is used to set the default font family, size, and color, as well as the page background color or image.
5. In "Define in" select the radio button next to "This document only." This selects embedded rather than linked styles.
6. Click OK.

Define Your New Style

7. The CSS STYLE DEFINITION dialog appears. In this dialog, you can set or change all the attributes for your styles. Use the categories on the left to see more style options. You only need to change those items you want to appear in your style. Leave all other options blank.

   
   Pictured above : Callout one: Include a range of Fonts to insure the users has one of the listed fonts installed on his/her machine. Callout two: Usability tip: use relative sizing whenever possible to define font and screen sizes.

8. When you have set all your styles, click OK. The new style now appears in your CSS STYLES DESIGN window.
   

Return to Contents

Applying Your Custom Styles

If you reformat an existing HTML tag, you do not need to do anything special to apply the formatting. For custom styles, you must apply the style to the text or paragraph. In most cases, you want the style to apply to the entire paragraph. Avoid using the SPAN tag whenever possible.

Apply a style to an entire paragraph.

1. Place your cursor inside the paragraph you want to format. Do not select any text or text area.
   Hint: avoid already formatted text like links, italics, or bold areas. Place your cursor in an area of the paragraph that contains no formatting.
2. In the PROPERTIES window, use the drop-down box next to the STYLE box to select the style you want to apply. The style will be applied.
   For a paragraph, the style should appear in the P tag: <p class="mystyle">Style text</p>.

Apply a style to a section of text.

1. Select the text you want to format.
2. In the PROPERTIES window, use the drop-down box next to the STYLE box to select the style you want to apply. The style will be applied.
   For a section of text, the style should appear within a new SPAN tag that encompasses the text: <span class="mystyle">Styled text</span>.

Styles can be applied to any tag P, H1, DIV, IMG, A, and etc. -- or can be inserted using the SPAN tag. However, applying styles properly may require some editing in the code view window.

Return to Contents

Preview Your Page

Dreamweaver includes a "Preview" feature that allows you to view your page in a web browser to see how it looks as you design. However, each time you preview your file, Dreamweaver creates a temporary file image of your page and it can quickly become confusing with so many oddly named temporary files in your site folder. The WAC recommends opening your browser externally and opening the file separately from Dreamweaver. Then, just click REFRESH to see your changes.

1. Open your internet browser (IE, Netscape, Mozilla, Opera).
2. From the FILE menu, choose OPEN.
3. Navigate to your web folder and select the page you wish to preview (C:\My Documents\WAC\practice.htm)
4. After you save any changes made in Dreamweaver, refresh the page in the browser to see your changes live.

Validate Your Page

Validate your HTML insure your code follows the formal grammar defined by your DOCTYPE statement. Use the W3C's Markup Validator.

Validate for Accessibility insure your page meets the minimum standards for accessible web design. Use the free version of Bobby. Hint: for simple validation choose "U.S. Section 508 Guidelines." For more complete validation, choose "Web Content Accessibility Guidelines 1.0."

Return to Contents

 View TEXT-ONLY version.
  Download/Print PDF version .

This document was created with the Illinois Accessible Web Publishing Wizard for Office.