Home | Internet Marketing | Viral Marketing

Creating Accessible Websites With Dreamweaver CS3

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.

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.

You will also notice an option to enter the file path of a file containing a long description of the image. Such a file should be prepared for images containing more detail than can be described with an alt tag, for example, a technical illustration or a photograph containing important details.

Dreamweaver will also prompt you, whenever you insert a form field, to add a label. If the form is in a table, you can also use the "for" attribute with the label. This means that if the label and the field it relates to are in separate cells of the table, their relationship will still be indicated by the "for" attribute. Dreamweaver also offers you the chance to indicate where the form field being inserted lies in the tabbing order: the order in which form elements are accessed when the Tab key is pressed.

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.

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.

Article Source: http://www.exclusive-article.com

Author is a developer and trainer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Please Rate this Article

Not yet Rated