| CityLinkPCs » Information-technology » Creating Accessible Websites With Dreamweaver CS3 |
Creating Accessible Websites With Dreamweaver CS3
|
View PDF | Print View |
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.
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.
Activating the Use CSS tags options will mean that whenever you apply a formatting attribute (such as changing the colour of text) Dreamweaver will use CSS to implement the formatting. This makes the page more accessible by separating the page content from the presentation information. Activating the options in the accessibility section will cause the display of a dialog each time that you insert an image, media element or form field. The dialog will contain options for making sure that the element being inserted will be accessible.
With the accessibility options activated, whenever you insert an image onto the page, Dreamweaver will display a dialog asking you to enter alternate text (alt text). The alt attribute provides a description of the image which can be seen by anyone waiting for the image to load on a slow internet connection. Anyone browsing your site with a screen reader will rely on your alt text to know what each image contains.
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.
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.
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
The writer of this article is a trainer and developer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes at their central London training centre.
Rating: Pending (52)
