Replace <img> tag with it's alt attribute ?

[PhillyPhanatic]

Hello,

I'm trying to create a text-only version of one of my sites. I have a toggle link switching between text and full html versions. If text-only was selected, then it changes the stylesheet.

However, I need to be able to replace all <img> tags with their associated alt attributes to make it completely text-only.

Is this possible?

Thanks

[jscheuer1]

A truly text only browser will ignore all javascript. A well designed page will automatically display well in a text only browser. Text only browsers will use image tags' alt attributes to fill out the content when not displaying images, as will most full service browsers when set to not display images.

[PhillyPhanatic]

Hi John,

Thanks for the quick reply.

My site is well-designed, and does automatically display well when images are turned off (at least in my opinion). However, what if someone who prefers text-only is visiting their friend's house and uses their computer which isn't setup for text-only? Aside from navigating the browser settings, I would like for users to have the option to explicitly request a text-only version by clicking my toggle link. More accessibility options seems better than less - not to mention it's a requirement for my project.

I tried using code like the following, but it skips every other <img> tag, so the first <img> on page is replaced, then the second is not replaced, then the third is replaced, then the fourth is not replaced, etc.

var di=document.images;

for(var i=0,mx=di.length;i<mx;i++){
var it=di[i];
var t=document.createElement("span");
t.innerHTML=it.alt || "";
it.parentNode.insertBefore(t, it);
it.parentNode.removeChild(it);
}

Also, this code causes validation errors due to the "mx" portion.

Any ideas how to make something like this work?

Thanks

[PhillyPhanatic]

is it possible to change the browser setting to not display images? if so, a cross-browser way to do it?

[jscheuer1]

is it possible to change the browser setting to not display images? if so, a cross-browser way to do it?

That aspect of how a browser performs is controlled by the user. I believe you are over thinking this. Just as many web designers want to control and/or make available for control via javascript the resolution and/or font-size users employ to view their pages - the browser itself can do that. Designers should only concern themselves with creating pages that can reasonably be viewed in the available user agents (browsers) on the available devices. Tweaking the particulars of the display/content/view/zoom should be left to the end user, whose user agent (browser) is well equipped to allow for such adjustments if the need arises.

Having a page that can be used in a text only browser is good though. It makes it accessible to those with visual handicaps using a screen reader, and to those with narrow bandwidth who choose to surf text only. This need not make the page boring or otherwise constricted in any way for those viewing it under more 'normal' circumstances.

[PhillyPhanatic]

I understand John and appreciate the feedback.

If anyone else is interested, the following code makes it work.

var di=document.getElementsByTagName('img');
for(var i=di.length-1;i>=0;i--) {
var parent=di[i].parentNode;
var span=document.createElement('span');
span.appendChild(document.createTextNode(di[i].alt));
parent.replaceChild(span,di[i]);
}

[Troy III]

Hi John,

Thanks for the quick reply.

My site is well-designed, and does automatically display well when images are turned off (at least in my opinion). However, what if someone who prefers text-only is visiting their friend's house and uses their computer which isn't setup for text-only? Aside from navigating the browser settings, I would like for users to have the option to explicitly request a text-only version by clicking my toggle link. More accessibility options seems better than less - not to mention it's a requirement for my project.

I tried using code like the following, but it skips every other <img> tag, so the first <img> on page is replaced, then the second is not replaced, then the third is replaced, then the fourth is not replaced, etc.

var di=document.images;

for(var i=0,mx=di.length;i<mx;i++){
var it=di[i];
var t=document.createElement("span");
t.innerHTML=it.alt || "";
it.parentNode.insertBefore(t, it);
it.parentNode.removeChild(it);
}

Also, this code causes validation errors due to the "mx" portion.

Any ideas how to make something like this work?

Thanks

I would go the other way around?
(I never used a text-only browser but I suspect that some of them might simply skip img tags just like ordinary browsers would skip unknown tags and their attributes)

Evolving your code is a better thought than trying to devolve it.
Imagine you are living in the era when images didn't exist but you have the vision of it and want to share. What would you do?

1. you would try to describe it with the only mean available; words.
2. you would give us directions of the location and the name of place where we could go see it ourselves.

If you agree, than analogous to that you would code something like this:

<span title="image1.jpg">your image content description here1</span>
<span title="image2.gif">your image content description here2</span>
<span title="image3.png">your image content description here3 </span>
<!-- and so on... -->
<span 
title="some image.jpg or imge.jpeg or image.gif etc are used as image extensions">Invalid address specified or ordinary span encountered here!
</span>

So this code is already text-only and browser ready.

The next step would be to make them CSS-only ready to browse using background properties of these spans and adjusting their dimensions, to be able to display images properly if background images are supported placing their description in some other tag that we can further style to suite our design and its purpose. but we will skip that as unrelated to java-scripting problems.

Therefore we will jump strait to the script

uncommented code

<script type="text/javascript">

var	spans2Images = function(i){// b.b. Troy III p.a.e.
 var	imgData = document.getElementsByTagName("span"),iLen=imgData.length; 
	if(iLen>i){	
	  if(!(imgData[i].title).match(/\.jpeg$|\.jpg$|\.gif$|\.png$/gi)){
		i++;
		return spans2Images(i); }
	  else{
		var	img = new	Image();
			img.src =	imgData[i].title;
			img.alt =	imgData[i].innerText||imgData[i].textContent;
			img.onerror = function(){this.title = this.src +" error - image not found!"}
			imgData[i].parentNode.replaceChild(img,imgData[i]);
			return spans2Images(i); } 
	} return "span2image tag-conversion completed!"
}

var report = spans2Images(0);

(for novices)
comented code
Our first step would be to get spans of our interest that may be scattered all over the document body in one place.
but not unless requested first, therefore we'll declare our function first

var	spans2Images = function(i){

than we'll collect span elements

var	imgData = document.getElementsByTagName("span"),iLen=imgData.length;

and of course their exact length/number in the same turn.
Than we will need some condition to walk down on them and to know when to stop.

	if(iLen>i){

So we'll stop walking when our counter gets equal to our collection length.
Yet we will need to discern between ordinary spans and our special image description spans. In most cases checking for Title attribute definition availability would be more than enough but that would impose restrictions to other spans that would for some reason require their title attributes set also. So we will be forced to make our conditional smarter and more sensitive. Therefore we will read these title attributes more carefully.

	  if(!(imgData[i].title).match(/\.jpeg$|\.jpg$|\.gif$|\.png$/gi)){

so that only true image addresses get qualified for conversion. And we are comparing against .jpeg;.jpg; ..gif; .png. (one could ad more if needed) that would be more than enough.
-Now that we are secured that only qualified spans will pas through conversion process we will need to count.

		i++;

Here, we've incremented our counter.
And since this span did not qualify, we will immediately turn back to our next candidate:

		return spans2Images(i); }

or if the current candidate passed our qualification

	  else{

we will proceed to our main routine

		var	img = new	Image();

We've just created our new image in DOM 0 super compatible manner.

			img.src =	imgData[i].title;

got our image address from our qualified span title attribute assigned.

			img.alt =	imgData[i].innerText||imgData[i].textContent;

defined our new image Alt attribute using span image description text.
Now this is optional, but might prove useful.

			img.onerror = function(){this.alt = this.src +" error - image not found!"}

if image is not being able to be served by our server our missing failed image will display our error message.
We can further utilize this behavior. We can for instance leave its alt attribute intact and ad that message to its Title attribute instead, or we can assign a new address to some default custom image missing icon. etc. but I'll leave it as is right now. Since this example is for demonstration purposes only.
Alright, we've arrived to our final step of making it all come true.
Replacing the image-inf span with the actual image.

imgData[i].replaceNode(img);

But since this ingenious method proposed by IE is still not accepted by W3C, and furthermore FX is programmed to throw error even if you only mention it. The beloved W3C is forcing us to call the parent of our perfectly grownup and adult span element before we are able to do anything with it.
"Hey span element! Please, can you call your parent - because I really don't know who that might be - so I can tell him, to tell you, to become full color image?" with the following method:

			imgData[i].parentNode.replaceChild(img,imgData[i]);

Now that its parent came to play and made it all happen - we can turn back to our next candidate...

			return spans2Images(i); }

and after all candidates are gone we will close our audition and write our report.

	} return "span2image tag-conversion completed!"

before closing the main gate

}

we will execute our idea this way

var report = spans2Images(0);

And at the end, if we like, we can read our function report

document.onclick=function(){alert(report)}

or by simply alerting our executioner result

alert(report)

Regards

[jscheuer1]

The standard for text only browsers, screen readers, and regular browsers with images turned off is to display (vocalize in the case of a screen reader) the image's alt attribute. That is a primary reason for the alt attribute and a primary reason why a page isn't considered valid unless all of its image tags have alt attributes. The only other reason I can think of off hand (other than IE's non-standard use of them as title attributes when no title attribute is supplied) for the alt attribute is for when the image is actually missing for some reason. So one should supply an alt attribute for every image. However, if the image is not crucial to conveying the content, it may be given an empty alt attribute.