ASCII Art as Alt Image Tags

Unfortunately, I can not find the original source I read for this idea and my image showing how I did get it to work is also lost due to moving my site around and losing post content. So, this post is a bit of a bust now. It should work but somehow I’m not getting it to load with the ASCII art in the alt description. Maybe it is an update to current web browsers that has foiled the old trick. Anyway, I am leaving the post up because I still like the idea. Not everyone tinkers with HTML any more. If you have and know what the alt image tags are (and where they are) you could give this a try. It’s not very practical now that almost no one uses a text based web browser. In the early days of the Internet a text based browser was practical because there were few images and if you stuck with text only web surfing you could be much faster in the days of dial up modems. As you can see below the code is basic HTML for adding an image with the addition of the alt attribute to describe the image. This alt tag is still practical for people who concern themselves with SEO. Mainly it is good for keeping your site accessible for those who are vision impaired and have technology which will read those image tags but be unable to describe the image unless the tag exists to be read. To do this, have your ASCII art ready. Create an ASCII image to go with the image (graphic/ photograph) you are using. In your HTML code┬áinclude the entire <IMG> tag inside <PRE>…</PRE> tags, and put the ASCII art inside the ALT attribute. With this code a text only web browser would pick up only the image text and thus show your ASCII art picture. The ASCII art picture would not benefit the vision impaired web reader/ browser. So it is a good idea to add a word to describe your image along with the ASCII art picture. Do not add text before or after the image itself. It will work as part of the image. Keep it all between the quote marks and the PRE tags (which tell the web browser this is pre-formatted information which should be kept “as is” with line breaks and spaces).]]>

Leave a Comment