Dreamweaver’s Approach To Website Accessibility
Posted on August 21, 2008
Filed Under Computers and Technology |
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.
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.
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.
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.
Comments
Leave a Reply