How to Make Accessible Web Content Using Dreamweaver 3.0 and 4.0
1. IntroductionA person can create accessible Web content using practically any authoring tool. One of the main strengths of Dreamweaver is that it does not change your code behind your back. I mention this first because, unfortunately, many of the more useful accessibility features of HTML are not programmed directly into the Dreamweaver interface. In fact, they're not programmed into the interface of any of the HTML editors that I'm aware of. Still, there are a few things that you can do in Dreamweaver without having to go to the source 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 Dreamweaver. 2. Enhancing the Accessibility Features of Dreamweaver2.1 Change the default template to one that is validThe default blank page that comes with Dreamweaver is not inaccessible per se, but it is incomplete as far as valid HTML is concerned. To update the default blank page, you must exit out of Dreamweaver, then find the folder on your computer where Dreamweaver resides. Inside of that folder should be another folder called "configuration," inside of which should be another folder called "templates." On my computer, the full path is C:\Program Files\Macromedia\Dreamweaver 4\Configuration\Templates. The actual path may be different on your computer. Inside of the templates folder is a document called "default." 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. 2.2 Install the Accessibility Validator Extension(s)There are two accessibility extensions for Dreamweaver to choose from. Macromedia made one themselves, and UsableNet made another one. Overall, UsableNet's is better and more customizable. Neither one is perfect. My personal favorite is the WAVE, which is an online validator. The downside to the WAVE is that the page has to be uploaded to the Internet before it can be evaluated. The Dreamweaver extensions below can evaluate pages that are on your hard drive. 2.2.1 Macromedia's accessibility extension
Macromedia has created an extension to Dreamweaver that can perform certain accessibility checks on your Web pages. The extension comes with Dreamweaver 4, and is compatible with Dreamweaver 3, but must be downloaded from Macromedia's Exchange center on their Web site and installed. On some releases of Dreamweaver 4 the extension must be installed from the CD-ROM. When installed, a new menu item appears in the Command menu (see screen shot to the right). The extension performs certain checks (see screen shot below), then generates a report with specific feedback. The feedback in the report is similar to the feedback that the online accessibility validator which Bobby gives. Both Bobby and the Macromedia accessibility extension have the same basic strengths and weaknesses. Both can check for certain types of accessibility violations (e.g. missing "alt" tags), but the list of violations which they cannot check is much longer. Some types of accessibility errors can only be judged by a human (e.g. the quality of the "alt" tags). Macromedia's accessibility extension is a good place to begin, but you cannot count on it to catch all of the potential problems. A sample report from the Dreamweaver extension shows the type of feedback given. The extension evaluates only one page at a time.
2.2.2 The "Section 508 Accessibility Suite Extension"
The programmers at UsableNet.com have put together another accessibility validator, which they have called the "508 Accessibility Suite Extension." This extension creates an entirely new menu item called "Accessibility" (see the screen shot to the right). This extension is more customizable, and has more functionality than Macromedia's extension (see the screen shot below). You can check a single Web page at a time, or you can check entire sites at a time (see the second screen shot below). With very large sites, however, I don't recommend checking the whole site at a time. The program uses a lot of memory and can take a VERY long time. In addition, the sheer quantity of feedback about all of the pages is almost completely unmanageable. When used on a single page, however, this can be a useful tool to use as a starting point for accessibility.
As with all automated accessibility validators, you must still perform the manual checks or else the feedback is much less useful. 2.3 Install the HTML validator extension (maybe)My rating: I only gave this extension 2 stars because the online version is so much better (http://validator.w3.org/). I would HIGHLY recommend using the online version, but the results from the Dreamweaver extension are more limited and less useful. 3. Using the Program3.1 Create accessible templates and add content within themOne of the strengths of Dreamweaver is its ability to create templates and library items. These are reusable bits of HTML that can be inserted into any page. 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 Dreamweaver's template and library 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 Dreamweaver from the WYSIWYG interface. Just select the image, then add the alt tag in the "Properties" palette. 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. The anchor command is in the Objects palette, under the "invisibles" heading (see screen shot).
3.2.3 Adding Table HeadersIt is easy to designate a cell as a header cell, just select the "header" checkbox in the Properties palette (see below) when your cursor is in the table cell. However, just adding headers is NOT sufficient to allow for easy table navigation with a screen reader. Screen readers need you to associate the cells in a data table with their corresponding headers. Dreamweaver does not have a method for doing this in their WYSIWYG interface. If the table is just used for layout (not a true data table), then there is no need to specify table headers or to associate the cells with the headers. 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, new options appear in the Properties palette. One of the options allows you to create an image map (this puts hot spots or links on the image). Dreamweaver creates client-side image maps. 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).Dreamweaver 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, Dreamweaver 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.Dreamweaver does a fine job of marking up simple bulleted or numbered lists. 3.2.10 Using relative size units (e.g. for tables) rather than absolute sizes.Dreamweaver allows you to use percentages, pixels, ems, or other units of measure when style sheets are used. Pixels and percentages are the common units of measure for non-stylesheet elements. Whenever possible, use percentages, EMS, or other relative 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 Dreamweaver takes a little bit of time to learn, but it may save you some headaches by allowing you to re-use 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 Dreamweaver'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 Dreamweaver. 3.3 Features NOT available through the WYSIWYG3.3.1 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 Dreamweaver. You have to go into the markup behind the WYSIWYG. 3.3.2 Adding the LONGDESC attribute.This tag is poorly supported in browsers, and unsupported in Dreamweaver's WYSIWYG as well. 3.3.3 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.4 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.5 Adding form accessibility features (LABEL, OPTGROUP, FIELDSET and LEGEND).None of the form accessibility features are available from the WYSIWYG. See the WebAIM tutorial on forms for more information. 3.3.6 Captioning videos.Captioning usually requires specialized software and/or hardware. MAGpie is a utility that speeds up the process somewhat. 3.3.7 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.8 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.9 Giving titles to frames.Dreamweaver doesn't have the best interface for frames. Then again, frames aren't usually the best interface for the Web, so I guess it fits. Still, there is no way to add titles to frames from within the WYSIWYG interface that I'm aware of. 3.3.10 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.11 Creating ACRONYM tags.You'll have to do this yourself (e.g. <acronym title="Center for Persons with Disabilities">CPD</acronym>). 3.3.12 Adding the TABINDEX feature.This feature allows you to custom design the tab order of the elements in your web page. Not all browsers support this feature yet, and Dreamweaver forces you to do it on your own. 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. 3.3.15 Adding meta-data.All meta-data in Dreamweaver is best edited in the HTML interface. 4. Dreamweaver Pitfalls4.1 "Layers"Dreamweaver allows you to position elements (Dreamweaver calls them "layers") on your page with pixel-level precision. This may sound like a good thing, but there are some drawbacks:
4.2 DHTMLDreamweaver has some fabulous utilities for creating DHTML (Dynamic HTML). Unfortunately, most DHTML is totally inaccessible to the keyboard. This means that individuals who are dependent upon the keyboard, whether it be because of muscular limitations or visual disabilities, are unable to use the DHTML functions on your pages. (Note: Blind people usually can't use a mouse because they can't see where to click.) |
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.
My rating:
My
rating: 
