Auto-Generating ALT Tags with Dreamweaver
December 24th, 2008
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.
