TechNote (Archived)

How can I add empty ALT values to image objects?

This technote describes how to customize a Dreamweaver Object file to add ALT attributes to IMG tags, but it's also an introduction to customizing Dreamweaver objects in general. Towards the bottom there's a description of customizing a TABLE object for different default row and column values.

Background: ALT attributes of IMG tags

An IMG tag for images has an optional ALT attribute. This can be used by non-visual HTML renderers, such as text-to-speech browsers. Some of these will ignore images which have an empty ALT attribute, but will announce "image" or other words if they find an image which has no ALT attribute.

The result is that it can be useful to have an empty ALT tag, if you know that some of your audience will be on certain auditory browsers that don't ignore ALT-less images.

In Dreamweaver's Property Inspector you can easily add descriptive ALT content. You can also add an explicit "ALT=''" (empty quotes) in the Dreamweaver HTML Inspector. Dreamweaver itself doesn't add these empty tags, though. You can change this if you wish, though.

Creating a custom IMG object

You can quickly alter a Dreamweaver IMG object to include an empty ALT attribute. The same approach can be used to customize objects for including borders on all images or other tasks.

Make a backup first. With Dreamweaver closed, go to your Configuration / Objects / Common folder, and duplicate the file IMAGE.HTM to your desktop or other safe location.
Open the original IMAGE.HTM in a text editor. You'll see it's just HTML and JavaScript, the same as other Dreamweaver Object files. The "showDialog()" function controls the display of the file directory dialog, but we're only concerned with the second function, "objectTag()", which controls the HTML that an object returns to Dreamweaver.
Find the "return" line in the "objectTag()" function, and change it so that it returns the HTML you wish. For instance, change this
return '<img href="' + newURL + '">';
to this
return '<img href="' + newURL + '" >';
Doublecheck the work, particularly the nested quotes... JavaScript can nest quotes by alternating single and double quotes, and in this example the outer quotes are single, the inner quotes are double. When satisfied, save the file and start Dreamweaver.

You can test the edit by starting Dreamweaver with a new document, and adding an IMG object from the Object Palette. Everything will look the same as before, but if you look at the image's tag in the HTML Inspector you'll see that there now a zero-pixel border and empty ALT attribute. This is an easy way to give all new images your own customized set of attributes.

(In some versions of Dreamweaver an empty ALT attribute may later go away if you change other attributes in the Property Inspector, such as resetting an IMG to its original dimensions or hitting RETURN while the cursor is in the Property Inspector's ATL field. If the attribute had content it would remain, but empty attributes can be cleared out when the tag is rewritten.)

Other uses

It's easy to create various types of customized objects like this. The general practice is to use an existing object file, make a backup copy, and change what you wish. If your edits result in invalid HTML then Dreamweaver may show an alert when it starts up, at which point you can remove the changed version and replace it with a backup copy.

For a more complex example, open the TABLE.HTM object file in a text editor. This has a lengthy HTML description of the dialog box itself. The "objectTag()" function queries this FORM element for values you enter, and constructs a complex string to return to Dreamweaver. There are also "saveExtension()" and "initializeUI()" functions that are not in the simpler objects.

But if you'd rather have default tables with 5 rows and 7 columns, then you can change this easily, right within Dreamweaver. Open the "TABLE.HTM" file in Dreamweaver, select the editable fields for columns and rows, and give them new default values in the Property Inspector. Save the file, restart Dreamweaver, and when you add a new TABLE object it will have the default values you specified.

Summary

You can make Dreamweaver do things the way you want. Even though there are complex extensions, it's easy to change objects to the default values you desire. If you're already comfortable looking at HTML and JavaScript, try opening an existing object and modifying it slightly. If you keep backup copies then the worst that could happen would be restarting the application.