Auto-Generating ALT Tags with Dreamweaver

Wednesday, December 24th, 2008

Categories: Web Development

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

What I had on my hands were a bunch of HTML files. Each of these HTML files had pictures, and I’m damn sure a lot of them didn’t have ALT tags, something essential for accessibility (and also helps with SEO). Using Adobe Dreamweaver (and possibly Macromedia versions of Dreamweaver), you can do searches and find and replaces with regular expression (regex). What you do is throw open Dreamweaver, hit Ctrl-F. At the bottom of the search window, there’s a checkbox for Use regular expression, check that and we’re ready to go.

Finding Images Without Alt Tags

I did some internet sleuthing and found the following code to search for images without ALT tags:

<img((?:(?!alt)[^<>])*)>

What it does is search for “<img”, and then the next “>” that occurs, hopefully the end of your image tag. it then checks for the phrase “alt” anywhere in there to find an alt tag. The downside, is that if you’re image HTML looks like this:

<img src=”malt.jpg” />

Dreamweaver won’t pick up on it. That’s something I’ll look into if I revise the code, but I wasn’t working on a beer website so I didn’t think it was going to be a problem.

Auto-Generating ALT Tags

Because it’s impossible to give an accurate description of each of the 400 images without consuming a lot of time, what we’re going to do is base the ALT tag on the file name.

Here is the FIND field:
<img src=”(.*?)(.gif|.jpg|.jpeg|.png|.GIF|.JPG|.JPEG|.PNG)((?:(?!alt)[^<>])*)>

Here is the REPLACE WITH field:
<img src=”$1$2″ alt=”$1$3>

What’s happening here? You’ll seethat we’re checking for the existence of the “alt” tag once again, but we’re also breaking down the image tag down. Each section to be broken down is within parentheses. The first chunk is the image’s source, then the image’s extension and then the last chunk before the end (that doesn’t contain an alt tag). For example:

<img src=”myDogShelby.jpg” border=”0″ height=”300″ />
becomes
<img src=”||||PART 1: myDogShelby||||PART 2: .jpg||||PART 3: border=”0″ height=”300″ /||||>

Then what we’re doing is reconstructing the image link as follows:

<img src=”myDogShelby.jpg” alt=”myDogShelby”  border=”0″ height=”300″ />

Simple? I thought so.

Finishing Touches

What happens when using this technique is that you’re also throwing the path into the ALT tag:

<img src=”images/shelby.jpg” />
becomes
<img src=”images/shelby.jpg” alt=”images/shelby.jpg” />

This is an easy fix, simply do a global search and replace. Replace:

alt=”images/
with
alt=”

Easy peasy, japaneasy. This is pretty straight-forward, hope that helps and saves you oodles of time.

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS
easy Hide your IP

Related Posts


Subscribe to this Post

3 Responses to “Auto-Generating ALT Tags with Dreamweaver”

  1. Bagha Says:

    I can see this being pretty helpful for large sites. I’m sure it’ll come in handy one day

  2. jifferson de venecia Says:

    Amazing… I hope i can make it easy. =)

  3. Bowling Dude Says:

    I hope the next version of Dreamweaver is more user friendly. There are just some things that are so cumbersome. You would think Dreamweaver would be more polished by now. Don’t get me wrong, its a great tool, but still needs work.