Implementing Accessibility in Dreamweaver

On June 21, 2001, Section 508 of the Federal Rehabilitation Act went into effect. As of that date, all federal departments and agencies were mandated to make their websites accessible in accordance with the specific regulations of Section 508. Since that time, Web designers in a wide range of fields, not just federal government, have begun creating pages with accessibility in mind. To many organizations-and thus, to many designers working for them-accessibility makes good business sense. The more accessible a website is, the more people can visit.

Dreamweaver includes a number of mechanisms for helping you to implement the accessibility standard in your webpages. In this step-by-step, you'll see how to set up your system to take advantage of the accessibility mechanisms built into Dreamweaver. Understanding where potential violations are is just as important-and in the final section of this tutorial, you'll learn how to run Dreamweaver's interactive accessibility reports.

STEP 1 Setting Up Preferences

Dreamweaver can help keep you on the accessibility straight and narrow as you build your pages from the ground up. In Dreamweaver, select Dreamweaver>Preferences (or press the keyboard shortcut, Command-U [PC: Control-U]). When the Preferences dialog opens, switch to the Accessibility category. Select the checkbox for each of the page elements: Form Objects, Frames, Media, and Images. Click OK when you're done. Although you can opt to enable accessibility options for just form objects or just images, for complete compliance it's recommended that all options be selected.

STEP 2 Inserting Standard Images

The Section 508 accessibility requirement for images falls under the category of non-text elements. To enable the visually impaired to access your site, two methods are available: alt or longdesc attributes. Both are attributes of the image tag. From the Insert bar's common category, click Image and pick STEP 2 Inserting Standard Images an image from the Select Image Source dialog. Click Choose; the Image Tag Accessibility Attributes dialog opens. Enter a short description in the Alternate Text field. If desired, enter an absolute URL to an HTML file with a longer description of the image in the Long Description field. Click OK.

STEP 3 Setting Empty Alt Values

Not all images on a webpage are intended to be identified by a screen reader-but all images do need an alt attribute regardless. Bullet and spacer images, for example, are typically intentionally ignored by the screen reader. Select the image and in the Alt field, choose Empty from the drop-down menu. With the image selected, switch to Code view and notice the image tag code now includes an attribute like this: alt="". When a screen reader encounters an img tag with such an attribute, it skips over it.

STEP 4 Handling Flash and Other Media

Like images, Flash and other non-text media require an alternative description of the object under Section 508. The object tag, however, doesn't offer an alt attribute, so the title attribute is used instead. To include a title in your Flash code, click the Media: Flash button in the Insert bar's Common category. After you've selected your SWF file, the Object Tag Accessibility Attributes dialog is presented. Enter a short description of your Flash movie in the Title field.

STEP 5 Working with Form Field Labels

Online forms present special challenges to those who are using assistive devices. Dreamweaver provides three supplementary aids for each input tag form element inserted: a label, an access key, and a tab index. To automatically generate a label, insert a Text Field (or Text Area, Radio Button, Checkbox, or List/ Menu) from the Forms category of the Insert bar. When the Input Tag Accessibility Attributes dialog opens, enter the desired text in the Label fi eld. If your form uses a table with one column for labels, click the Attach Label Tag Using 'For' Attribute option.

STEP 6 Applying an Access Key and Tab Index

In addition to correctly identifying the form elements, you also want to provide helpful tools for navigating the form. Both the access key and tab index functions can help in this regard. In the open dialog, enter any letter in the Access Key field. The current field receives focus when the page visitor presses Option (PC: Alt) plus the specified key. In the Tab Index field, enter a number indicating the position of the current field should the user tab through the form; the tab sequence goes from lowest tab index to highest. Click OK when you're done.

STEP 7 Finishing the Form

The text field is inserted at the current cursor position with the label next to it. Assuming your form design calls for a right-aligned column for labels, choose the <lable> tag in the Tag Selector and drag it into the leftmost column. After you've inserted all of the form elements and moved their associated labels, select all of the elements in the label column and apply the appropriate CSS style. When you insert the submit button, choose the No Label Tag option in the Input Tag Accessibility Attributes dialog, enter an Access Key letter and a Tab Index number, and click OK.

STEP 8 Adding Table Header Rows

Accessibility options for tables are always available, regardless of your Preferences settings. Section 508 guidelines calls for row and column headers to be identified for data tables. The standard way to accomplish this goal is to use table header tags, <th>, for cells with header information rather than the standard <td> cells. From the Common or Layout categories of the Insert bar, choose Table. In the Header section of the Table dialog, select Left, Top, or Both; click OK. If you examine the code of the inserted table, you'll see <th> tags for every cell in your designated header.

STEP 9 Initiating Reports

At various stages of development, after completing a page and before pushing a site live, you'll want to make sure your webpages are in compliance with Section 508-and correct any problems, if necessary. Dreamweaver includes a reports feature to help you get an overall picture of the site, including accessibility requirements. To gain access to a report, choose Window>Results or press F7. When the Results panel opens, click the Site Reports tab.

STEP 10 Setting Report Scope

Out of the box, Dreamweaver includes nine different reports. To select which reports to run, click the green arrow in the left of the Results panel. When the Reports panel opens, set the scope of the operation by choosing Entire Current Local Site from the Report On list; you can also examine a single page, fi les selected in the Files panel, or a chosen folder. Reports can be run singly or in combination with other reports. Check the Accessibility option to focus on compliance.

STEP 11 Defining Report Settings

Several of the report types, including Accessibility, allow the user to specify report parameters. With the Accessibility report option highlighted, click Report Settings. The Report Settings dialog allows you to enable or disable accessibility requirements in a number of ways. In our example, only Section 508 accessibility is required and, by default, additional standards are also enabled. To restrict the requirements, fi rst select W3C/WAI_accessibility and then click Disable. Then, highlight 508_accessibility and click Enable. To see which accessibility rules were successfully implemented, click Show "Passed" Tests. Click OK when you're ready.

STEP 12 Running the Report

Now that the parameters are set, in the Reports dialog, click Run. The dialog closes and the site files are processed; you can follow the operation in the Results panel. When the report has been fully run, you'll see a list of entries with a variety of symbols. The immediately identifiable problems are marked with a red X, while the more gray-area issues that require some consideration are noted with a question mark. You can sort the errors by file name, line number, or description.

STEP 13 Understanding Errors

A brief description accompanies each entry, like Non Spacer IMG with Valid ALT, followed by a reference to the accessibility code violated. Both Section 508 and WAI references are included, but only Section 508 errors are flagged. If you're not sure what a particular entry's problem is-or how to fix it-click the More Info icon on the left side of the Results panel. The Reference panel opens and displays a more in-depth discussion of the accessibility error, testing scenarios, and possible corrective actions to take.

STEP 14 Repairing Accessibility Issues

To fi x fl agged errors, doubleclick any entry to go to the code with the error. If necessary, Dreamweaver opens the referenced page and enters into Split view, with the code highlighted. One of the most common errors is the lack of a valid alt tag for a spacer or shim image. If your Results panel lists such an issue (shown as Spacer IMG with Valid ALT), you can begin to fix it by double-clicking the error entry. With the problem img tag selected, in the Property inspector, select <empty> from the Alt list. Save your page before rerunning the report.

Joseph Lowery is author of the Dreamweaver MX Bible and the Fireworks MX Bible series as well as co-author of the Dreamweaver Killer Tips series. His books are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages.