Smaaz’s Blog

Dreamweaver’s Approach To Website Accessibility

October 8th, 2007

Accessibility, in the context of websites, refers to the degree to which the content you add to your web site can be accessed by your audience; all of them, not just the able bodied ones and those with 20/20 vision. Accessible websites offer good support for screen readers, cater for users who browse the web without viewing graphics and who wish to magnify the text on your pages to a level comfortable for their eyesight.

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.

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.

Thus, whenever you add an image to a page, a dialog will appear prompting you for alternate (alt) text. This attribute makes images more accessible by providing a description of the images to users accessing the web with a slow connection as they wait for the image to load or who have disabled the display of images. The alt text will also be spoken by the screen readers commonly used by web surfers with impaired vision.

In addition to the alt text, Dreamweaver also allows you to browse for or enter a path leading to a long description file. This option relates to HTML’s longdesc attribute which should be used for images whose content is too detailed or too important to be described in the short alt text.

When the accessibility options relating to forms are active, Dreamweaver will display a dialog of options every time a form or form element is added to the page. The first set of options relates to the addition of the LABEL tag which serves to associate descriptive text labels with the form control to which they relate. The dialog also allows you to specify the order in which elements will be accessed by pressing the Tab key on the keyboard.

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.

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.

The writer of this article is a trainer and developer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.

Entry Filed under: Dreamweaver