Creating Accessible Websites With Dreamweaver CS3

by Andrew Whiteman

The accessibility of a web site relates to whether its content is compatible with all members of its potential audience. If, for example, people with impaired vision are unable to read the text on your pages then your website is inaccessible to them. An accessible website needs to anticipate the requirements of visitors and the different tools and settings they will be using when they browse your pages.

Dreamweaver has a number of features which enable web developers to ensure that content on their pages Is accessible. There are useful dialogs which appear automatically when content added to a page can be made accessible. Dreamweaver also allows web page creators to check their pages for any accessibility issues.

Dreamweaver’s program settings contain two main features relating to accessibility. To access these settings, choose Edit - Preferences (or Dreamweaver - Preferences) on a Mac. Next, click on the Accessibility category and activate the options which to display attributes for form objects, media (which refers to such things as video clips, audio and Flash) and graphics. It is also useful, in the General category, to switch on the option to use CSS instead of HTML tags.

So what is the result of switching on these various preferences? Well, firstly, Dreamweaver will use CSS tags whenever you format text or the background of the page. The CSS tags contain the formatting information and will be placed in the head area of the page away from the content which will be in the page body. The program will also display a dialog box with accessibility options each time you insert an image, form field or media element such as a Flash movie or video clip.

When you add an image to any page, you will see a dialog box which invites you to enter the alternate (alt) text. You should key in a brief description of the image. This alt text will be displayed in the browser if the image itself is not displayed, for example, when the user has deactivated the display of images. Screen readers will also speak your alt text whenever an image is encountered.

Dreamweaver will also prompt for the insertion of a link pointing to a long description of an image. This option should be used for complex images whose content cannot be adequately described in the brief alt text attribute. Examples of such images would be charts, diagrams, paintings or photos containing groups of people.

Just as the alt text describes the function of images, the label attribute describes the function of each form field. When the accessibility preferences are active, Dreamweaver will prompt you to enter a descriptive tag for each field. In addition, you can specify the tab order of each element. This is the order in which elements within the form can be accessed by users by simply pressing the Tab key.

When a media element, such as a Flash movie, video or sound clip is inserted on a page, Dreamweaver will prompt the user to enter a title, access key and tab index. The title provides information regarding the media element in much the same way as alt text does for images. Access key offers users who find use of the mouse difficult an alternative method of accessing the media element using a keyboard shortcut. The tab index allows the creator of the page to specify the order in which elements on the page can be activated by using the Tab key.

Dreamweaver not only gives you help in making your page content accessible, it will also check your pages to see if they contain elements which are not accessible. To use the accessibility utility, click on the File menu then on Check Page and finally on Accessibility. The utility runs and then displays a list of elements on the page which are not accessible. If you double-click on any of the items in the list, the code representing it will be instantly highlighted allowing you to edit it.

About the Author:


Related posts on 




Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
« Previous
« How to Profit from Natural Gas | Up Top | Causes of Hair Loss in Women »