View Graphic 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 all settings may not 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":
  4. Use CSS instead of HTML tags. Image: Section of preferences window showing options for STRONG and EM tags and CSS instead of HTML tags.
.

Preferences Accessibility

  1. From the CATEGORY list on the left, select ACCESSIBILITY.
  2. Check all the boxes next to the HTML elements list (Form objects,
    Frames, Media, Images). Image: Section of preferences window showing all attributes for accessibility selected: form objects, frames, media, images

Preferences Code Format

From the CATEGORY list on the left, select CODE FORMAT.
  1. Set CENTERING to USE DIV TAG. Image: Section of preferences window showing centering option as Use DIV tag and not Use CENTER tag.

Preferences New Document

  1. From the CATEGORY list on the left, select New Document.
  2. From the drop-down list, select HTML as the default for new documents. Image: Section of preferences window showing default document type as HTML.
  3. Choose to make documents XHTML compliant. Image: Section of preferences window showing Make documents XHTML compliant option checked.

Preferences -- Validator

  1. From the CATEGORY list on the left, select Validator.
  2. 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). Image: Section of preferences window, validator category, showing options validation checked: XHTML 1.0 transitional, Internet explorer 4.0, and Netscape Navigator 4.0.
  3. Click on the OK button to save all your changes to PREFERENCES.

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 (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).

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.

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.

  1. Click on the ADVANCED tag at the top of the SITE DEFINITION dialog box.
  2. From the CATEGORY list on the left, select LOCAL INFO.
  3. In the SITE NAME box, identify your site (for your use only can be any name).
  4. 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).
  5. 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.
  6. In the HTTP ADDRESS box, type the URL for the home page of your site.
  7. Make sure the box next to ENABLE CACHE is selected.
  8. Click OK to save your site and return to design mode.

Familiarize Yourself with Dreamweaver.

Image: Screen capture of Dreamweaver work space.

Long Description: Calloouts identify the main design view, view toggle buttons, properites box, CSS styles box, and site files management windows.

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:

Image: Finished view of page to be created in this tutorial. See index.html in Practice Web.

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!

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:

Image: Practice.htm page containing unformatted version the index.html page -- all text; no images inserted yet.

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.

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:

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

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 Image: Insert table toolbar button. on the COMMON toolbar.
  2. The TABLE dialog box appears: Image: Insert table dialog. Long Description: 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:
Image: Properties box showing selections for table properties.

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.

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

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: Image: Insert Data Table dialog box. Long Description: 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.

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 "headers" box in the PROPERTIES window. Image: Header box on 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.

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 online: http://www.wac.ohio-state.edu/tutorials/bestpractices/images.htm.

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 Image: Insert Image button on the COMMON toolbar.
  2. The SELECT AN IMAGE dialog box appears: Image: Select image 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." Long Description: 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.
    Image: Image tag accessibility attributes.
  5. You can alter the ALT tag at any time using the PROPERTIES window. Image: ALT tag box in 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. Image: Map area buttons in 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. Image: Split view of image with image map and properties box. Shaded area shows image map section defined. Long Description: 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.

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. Image: Named anchor dialog.
  4. An anchor symbol Image: named 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
  1. Place the cursor at the beginning of the page, as close the BODY tag as possible (use the CODE VIEW, if needed).
  2. From the INSERT menu, choose IMAGE. OR use the insert image button Image: insert image button on the COMMON toolbar.
  3. 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].
  4. In the IMAGE TAG ACCESSIBILITY ATTRIBUTES dialog box type the ALTERNATE DESCRIPTION: "skip navigation".
  5. 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. Image: Properties box for image. Shows ALT and LINK boxes highlighted.

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.

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.

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.

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.

Image: CSS Styles Design Window

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 Image: new CSS style button in the DESIGN window.
  2. The NEW STYLE dialog box appears. Image: New CSS dialog box.
  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:
    1. 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
    1. 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

  1. 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. Image: CSS style definition box. Category TYPE highlighted. Long Description: 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.
  2. When you have set all your styles, click OK. The new style now appears in your CSS STYLES DESIGN window. Image: CSS Styles Design window showing the new Body style.

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.

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."

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