DITA Tip: Use alt tags to plan your GUI writeup

Quick tip here. Use alt-text attributes on images to plan your GUI topics. Later, when you fill in the actual screenshots, the accessibility work is done!


Accessibility guidelines require text in the alt attribute for each image in the topic. That can be something of a pain, when you have to go back over a large document and add the missing attributes.

At the same time, writing GUI topics can be something of a pain, because the GUI invariably changes, which requires you to retake all the screenshots and rewrite the topics. That's a good argument for waiting until the last minute to take the screenshots.

You still want to know where they're going to be however, and show early reviewers what you have in mind. So it makes sense to create a dummy image (say, placeholder.png) that can be inserted into the topics at the right points.

With the image tag in place, it's possible to set the attributes to the standard values used in your installation. (Here, those values are placement="break", align="left", and width="700px".)

Right about the time I got to sixth screen shot, I realized that in a week or two, it might be difficult to remember exactly what I had in mind for a particular screenshot--what was going to be there, what parts were going to be highlighted, etc.

That's when it occurred to me: Alt Text! That attribute gives me a nice place to describe the screenshot I plan to take. And once I've done that, the accessibility text is already in place!