Bookmarklet to check alt attributes

Accessibility
1

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

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.

3

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:


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;}
4

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

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

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.

7

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

Thanks, I’ll check it out.

9

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

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.