|
|
How to Create Accessible Websites With Dreamweaver CS4
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.
Creating accessible web pages is the responsibility of the person developing the web site. However, Dreamweaver has a couple of features which assist web page creators in ensuring that their pages are accessible. Firstly, the program can be asked to display a dialog with relevant accessibility options whenever you add an element to a page. The program also has an accessibility check feature which looks for elements on the page which are not accessible.
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.
The result of activating these elements is that when you apply formatting attributes to text or to the body of the page, Dreamweaver will create CSS tags to achieve the formatting since CSS makes web pages more accessible by separating formatting information from the actual page content. Another consequence will be that, each time you add certain elements to a page, a dialog will appear prompting you to choose which of the relevant accessibility attributes you wish to associate with that element.
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.
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.
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.
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.
|
 |
Please Rate: |
|
Rating: |
 Processing ... |
(Average: Not rated) |
| Views: | 138 | |
|
| More Articles from Web Development | | |
| Top Articles in Web Development | | |
|
