Free Articles at Neutron Marketing Article Publishing and Distribution » Internet-and-businesses-online » Web-development » Creating Accessible Websites With Dreamweaver CS3
Previous Article - Web Development in Plain English
Next Article - Learning about good form creation software

View PDF | Print View | Html Version
by: AndrewWhiteman
Total views: 3
Word Count: 679

A website's accessibility is a measure of how easy it is for visitors with different levels of motor, visual and auditory ability to make sense of the content on your web pages. If your website is accessible then people using screen readers, who prefer not to display images as they browse or who wish to increase the size at which text is displayed can all gain access to the information held in 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.

When you install Dreamweaver CS3, there are a couple of program settings which relate to accessibility which you should ensure remain activated. To check that these settings are active, you should choose Preferences in the Edit menu then click on the Accessibility category on the left of the screen. Make sure that the options "Show Attributes For..." "Form objects", "Media" and "Graphics" are all switched on. Also, click on the General category and activate "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.

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.

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.

Every time you add a Flash movie, video clip or other media element to a web page, Dreamweaver will also prompt you to make the media element accessible. There are three attributes which it refers to: the title, access key and tab index. The title should offer a brief description of the media element in a way similar to that in which an alt label describes an image. The access key is a keyboard shortcut which can be used to make the media element active. The tab index indicates where the media element lies in the tab order, the order in which elements are accessed when the Tab key is pressed.

In addition to assisting you in making elements accessible, Dreamweaver has a utility for checking the accessibility of any page in your site. To use this feature, you need to have the page open and any changes saved. Choose File - Check Page - Accessibility. Dreamweaver will perform an analysis of the page and display a summary of its results. It will list all elements which could be regarded as inaccessible. You can double-click on any element in the list to highlight it both in the code and on the page.

About the Author

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

---

Rating: Not yet rated

--Choose-- 0 1 2 3 4 5

No comments posted.

Add Comment

Enter the code shown