SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bookmarklet to check alt attributes

    The following is a bookmarklet I just created to check alt attributes on a web page. Tested on Firefox 8.1.

    javascript:var%20imgs%20=%20document.getElementsByTagName('img');for%20(i=0;i<imgs.length;i++)%7Bif%20(imgs.item(i).hasAttribute('alt'))%7Bif%20(imgs.item(i).getAttribute('alt')=='')%7Bimgs.item(i).setAttribute('title','***%20empty%20alt%20attribute%20***');%7Delse%7Bimgs.item(i).setAttribute('title',imgs.item(i).getAttribute('alt'));%7D%7Delse%7Bimgs.item(i).setAttribute('title','***%20no%20alt%20attribute%20***');%7D%7D//released under GPL 3.0

    To use, click on the bookmarklet in the bookmarks toolbar, then hover over each image.

    Hope this helps.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    A better way to check the alt attributes is to simply turn off images in the browser. That way you see them as they are meant to be seen.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    A better way to check the alt attributes is to simply turn off images in the browser. That way you see them as they are meant to be seen.
    But it would probably be quite easy to miss an image if it didn't have an alt attribute (or an empty one).

    Something like Eric Meyer's Diagnostic CSS could be helpful as well in these sort of scenarios as it defines a couple of rules for images that will highlight them if they haven't got alt or titles:

    Code css:
    img[alt=""] {border: 3px dotted red;}
    img:not([alt]) {border: 5px solid red;}
    img[title=""] {outline: 3px dotted fuchsia;}
    img:not([title]) {outline: 5px solid fuchsia;}
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The Web Developer Addon already shows ALT attributes without the faff of mousing over a specific image. Since it would become repetitive if you were checking for an ALT attribute and having to click on several different images upon a page.

  5. #5
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Part of why I like Opera's user CSS since some of the built in styles do things like this... the Alt debugger for example shows images on page which lack or have empty alt text. Images off forces borders on, so any empty boxes are obviously images lacking alt text...

    ... and part of why FF is a tinkertoy since you have to mod it with extensions to get what I've grown accustomed to being OOB functionality...

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    A better way to check the alt attributes is to simply turn off images in the browser. That way you see them as they are meant to be seen.
    The disadvantage of that is that you can't tell if an alt attribute that is present is appropriate for that image. You need to be able to see both the attribute and the image at once.
    Last edited by Charles Belov; Dec 12, 2011 at 17:25. Reason: add quote

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    But it would probably be quite easy to miss an image if it didn't have an alt attribute (or an empty one).

    Something like Eric Meyer's Diagnostic CSS could be helpful as well in these sort of scenarios as it defines a couple of rules for images that will highlight them if they haven't got alt or titles:

    ...snip...
    You're allowed to have either one, so if it has an alt but not title that would be fine. I was actually working on an additional version of the bookmarklet that would do something similar. Alas, it wasn't working and I have a corresponding post in the JavaScript forum.

    Anyway, thanks. I'd rather hear a solution twice than not at all.

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    The Web Developer Addon already shows ALT attributes without the faff of mousing over a specific image. Since it would become repetitive if you were checking for an ALT attribute and having to click on several different images upon a page.
    Thanks, I'll check it out.

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes http://chrispederick.com/work/web-developer/ is the one I was talking about, which is very famous since there are some of a similar name.

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    San Francisco
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And here's the code I finally wound up with, with the borders, with assistance from AussieJohn

    javascript:(function()%20{var%20imgs%20=%20document.getElementsByTagName('img');for%20(i=0;i<imgs.length;i++){if%20(imgs.item(i).hasAttribute('alt')){if%20(imgs.item(i).getAttribute('alt')==''){imgs.item(i).setAttribute('title','***%20empty%20alt%20attribute%20***');imgs.item(i).style.border='2px%20dotted%20black';}else%20if(imgs.item(i).getAttribute('alt')=='%20'){imgs.item(i).setAttribute('title','***%20space%20alt%20attribute%20***');imgs.item(i).style.border='2px%20dotted%20orange';}else{imgs.item(i).setAttribute('title',imgs.item(i).getAttribute('alt'));imgs.item(i).style.border='2px%20dashed%20green';}}else{imgs.item(i).setAttribute('title','***%20no%20alt%20attribute%20***');imgs.item(i).style.border='2px%20solid%20red';}}/*released%20under%20GPL%203.0*/})%20();

    This shows borders. I chose to show an alt attribute of a space differently from a null alt attribute, as WCAG 2.0 says a space is valid but that a null attribute is preferred when the alt attribute is expected to be ignored, according to accessibility technique H67.


Bookmarks

Posting Permissions

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