JavaScript Adding ALT attribute to images and links
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 9 of 9

Thread: Adding ALT attribute to images and links

  1. #1
    Join Date
    Oct 2011
    Posts
    5

    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>

  2. #2
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: Adding ALT attribute to images and links

    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
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Oct 2011
    Posts
    5

    Re: Adding ALT attribute to images and links

    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
    ???

  4. #4
    Join Date
    Oct 2011
    Posts
    5

    Re: Adding ALT attribute to images and links

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

  5. #5
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: Adding ALT attribute to images and links

    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?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    Oct 2011
    Posts
    5

    Re: Adding ALT attribute to images and links

    yes

  7. #7
    Join Date
    Oct 2011
    Posts
    5

    Re: Adding ALT attribute to images and links

    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

  8. #8
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,860

    Re: Adding ALT attribute to images and links

    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.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    Jun 2009
    Posts
    86

    Re: Adding ALT attribute to images and links

    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');

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center