UCSF University of California, San Francisco      About UCSF       Search UCSF       UCSF Medical Center     
  Education & Training    Research    Patient Care   
 
Print This Page For Normal View, Click Here For Larger Font Sizes', Click Here

 
 
Information Services Unit
Web Resources
Announcements
Web Techniques
Web Worker Meetings
Training Resources
Web Style Guide
 

Inserting accessible images/Creating "alt" tags

First, update your DreamWeaver preferences to prompt you to enter the "alt" tag when you add an image.

To insert an accessible image:

  1. Place the insertion point in the Document window where you want the image to appear.
  2. Do one of the following:
    • Choose Insert > Image.
    • Click the Image button on the Common tab of the Insert bar.
    • Drag the Image icon from the Insert bar into the document.

      The Image Source dialog box appears.
  3. Click Browse to choose a file or type the path for the image file.


    If you are working in an unsaved document, Dreamweaver generates a file location reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
  4. Click OK.

    The Image Tag Accessibility Attributes dialog box appears.

    Alt Tag Dialog Box

  5. Enter values in the Alt and Longdesc text boxes. (Currently, the School of Medicine is not using the Longdesc option, however, we do require that all images contain Alt tags.)

    For more information see Setting the Image Tag Accessibility Attributes dialog box options.

  6. Note: You can enter one or both text boxes depending on your needs.

  7. Click OK.

    The image appears in your document.

    Note: If you press Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.

To edit accessibility values for an image:

  1. In the Document window, select the image.

  2. Do one of the following:
    • Edit the Alt value in the Property inspector.
    • Edit the appropriate image attributes in Code view.
    • Right-click (Windows) or Control-click (Macintosh), and then choose Edit Tag Code.
Setting the Image Tag Accessibility Attributes dialog box options

The purpose of this dialog box is to set image tag accessibility options. You can enter one or both attributes depending on your needs. The screen reader reads the Alt attribute for the image.
  1. In the Alt text box, enter a name or brief description for the image.

    The screen reader reads the information you enter here. You should limit your entry to around 50 characters. For longer descriptions, consider providing a link, in the Longdesc text box, to a file that gives more information about the image.
  2. (Currently, the School of Medicine is not using the Longdesc option, the following is for information purposes only.) In the Longdesc text box, enter the location of a file that displays when the user click the image or click the folder icon to browse to the file.

    This field provides a link to a file that is related to, or give more information about, the image.
  3. Click OK.

    Note: If you press Cancel, the image appears in the document, but Dreamweaver does not associate accessibility tags or attributes with it.
Updated: May 17, 2007
    Site Map    Contact Info     ©UC Regents