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.
There are a number of features within Dreamweaver which help web developers ensure that their pages are accessible. The program can be set up so that it will automatically offer you a series of accessibility options whenever you add an image, media element or form field to a page. There is also a built-in utility which you can use to check whether your pages contain elements 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.
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.
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.
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.
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.
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.
