Adding ALT attribute to images and links

The buttons and links are built in javascript and need alt attributes added in javascript to make the page usable for screen reader users. Is there a way to add it in this code?

Code:

---

<script language="JavaScript">
if( is.min ){
    document.write(button38.div)
    document.write(button41.div)
    document.write(button42.div)
    document.getElementById("button38").tabIndex = 5;
    document.getElementById("button41").tabIndex = 2;
    document.getElementById("button42").tabIndex = 4;
    document.getElementById("button38").accessKey = '5';
    document.all.button38.accessKey = '5';// IE only
    document.getElementById("button41").accessKey = '2';
    document.all.button41.accessKey = '2'; // IE only
    document.getElementById("button42").accessKey = '4';
    document.all.button42.accessKey =  '4'; // IE only
}
</script>

---

Whole lot of error here. Are you trying to dynamically create elements? If so...here's how.

Code:

---

var newImage = document.createElement("img");
newImage.src = "path/to/image.jpg";
newImage.alt = "Place alt text here";
document.append(newImage); // you can replace "document" in this line for the element in which you wish to append the new image

---

Hi PeejAvery, thanks for your response. The elements (buttons and links) are created dynamically and ther function well. However, is there a way to add the alt text attribute to what I have already scripted? What about something like:

Code:

---

document.getElementById("button42").alt = 'Next Page';
    document.all.button42.alt =  'Next Page'; // IE only

---

???

the code above doesn't work. Any other ideas?

1. Don't use the IE implementation. Always use document.getElementById().

2. That code is correct. Did you actually give the id button42 to an image element?

yes

Hi again, it didn't work so I tried putting the elements into an array because the same buttons and links are all on 32 pages. This doesn't work either.

Code:

---

var myelements=new Array();
myelements[0]="button38"; // Next Page
myelements[1]="button39"; // Previous Page
myelements[2]="button40"; // Exit this Course
myelements[3]="button41"; // Get Help with this Course
myelements[4]="button42"; // Return to Welcome Page
myelements[5]="menu806"; // Navigation Assistance for this Course
myelements[6]="menu763"; // Go to Module 1: Fleet Vehicle
myelements[7]="menu761"; // Go to Module 2: Fleet Card
myelements[8]="menu759"; // Go to Module 3: Rules and Self Certification

element[0].setAttribute('alt', 'Next Page');
element[2].setAttribute('alt', 'Previous Page');
element[3].setAttribute('alt', 'Exit this Course');
element[4].setAttribute('alt', 'Get Help with this Course');
element[5].setAttribute('alt', 'Navigation Assistance with this Course');
element[6].setAttribute('alt', 'Go to Module 1: Fleet Card');
element[7].setAttribute('alt', 'Go to Module 2: Fleet Card');
element[8].setAttribute('alt', 'Go to Module 3: Rules and Self Certification');


function alttext()
{
if (document.getElementsById)
{
var myelements = document.getElementsById("");
for (var i=0; i<myelements.length; i++)
{
var myelements = myelements[i];
myelements.alt = myelements.innerHTML.substring(0,1);
}
}
}
window.onload = alttext

---

Once again...your code is incorrectly written.

#1 You're trying to set indexes of an array (element) to have an alt attribute...which they don't have.

#2 Your not even getting any elements because your id is a blank string.

#3 No where have you shown code for where the images are.

What you've tried should work, but only if the ID it's associated with is an image, so this code works:

Code:

---

var button42div="<img id='button42' src='chart.png' />";
document.write(button42div);
document.getElementById("button42").setAttribute('alt','Next Page');

---

But this code doesn't:

Code:

---

var button42div="<div id='button42'><img src='chart.png' /></div>";
document.write(button42div);
document.getElementById("button42").setAttribute('alt','Next Page');

---

Which is why you're being asked to show the code for the images - and given that what's being written has names like "button38.div" implies that it's the DIV which has the ID and not the image inside it.
Assuming that the image is the first element inside the DIV, try getting to it through the "firstChild", like this:

Code:

---

var button42div="<div id='button42'><img src='chart.png' /></div>";
document.write(button42div);
document.getElementById("button42").firstChild.setAttribute('alt','Next Page');

---