Smaaz’s Blog

Creating Accessible Websites With Dreamweaver CS3

April 12th, 2008

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.

There are a number of features within Dreamweaver which help web developers ensure that their pages are accessible. The program can be set up so that it will automatically offer you a series of accessibility options whenever you add an image, media element or form field to a page. There is also a built-in utility which you can use to check whether your pages contain elements which are not accessible.

The main settings in Dreamweaver are located by choosing Edit - Preferences. On the left of the Preferences screen there are a series of categories. In the General category, you should ensure that the option to use CSS instead of HTML tags is activated. Also, in the Accessibility category, you should switch on all of the checkboxes for displaying a dialog of relevant accessibility attributes for form object, media (Flash, video etc.) and form elements.

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.

Similarly, if you add a media element to a page, the accessibility dialog pops up and prompts you to enter up to three elements: a title, an access key and a tab index. The title should be a description of the media element and serves a similar function as the alt text which is used with images. The access key is an optional keyboard shortcut which can be used to make the media element active. The tab index is a number which indicates the position of the element in the tab order for that page. The tab order is the order in which elements are accessed when the user presses the Tab key.

As well as these useful prompts, Dreamweaver will also produce a report of any items on the page with possible issues relating to accessibility. To access this feature, first save the page then choose File - Check Page - Accessibility. Dreamweaver analyses the page then produces a list of items which might need attention. Double-clicking any item in the list activates Dreamweaver’s split screen view (showing both code and preview) with the relevant item highlighted in each pane.

The author is a trainer and developer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Entry Filed under: Dreamweaver