Scan site for images and alt attributes

Question

We'd like to run a scan on our site that returns a report with the following:

each image tag found and a visual representation of that image on the report
the alt attribute for that image (also identify if an alt attribute isn't found)

Is there a simple tool that does this? We're attempting to check for alt attributes, and make sure the alt attributes accurately describe to the image they represent. That's why the visual representation in the report is important.

Great question! Couple of things to note: some techniques may find the IMG tags that are in the initial state of the page, but may or may not work with IMGs that are added to the DOM at runtime via JavaScript. You may also watch for cases where an image is actually a CSS background-image rather than an IMG. Depending on your site's coding practices, these may or may not be issues. — BrendanMcK, Mar 13 '12 at 10:38
alt attributes should provide a textual replacement for the image, that often is not a description of it. Using descriptions leads to [howlers like these](http://www.alanflavell.org.uk/alt/alt-text.html#howlers): `Large Yellow Bullet Introduction Large Yellow Bullet The Problem Small Red Bullet Historical Analysis Small Red Bullet Current Situation Large Yellow Bullet The Solution` (line breaks and formatting lost due to SO comment limitations). — Quentin, Apr 30 '12 at 11:37

score 3 · Answer 1 · edited Apr 30 '12 at 11:21

3

Try the Python package Beautiful Soup. It will parse all of your HTML for you in a really simple statement. Try this code:

website = urllib2.urlopen(url)
websitehtml = website.read()
soup = BeautifulSoup(websitehtml)
matches = soup.findAll('img')
for row in matches:
    print row['src']
    print row['alt']

From here use row['src'] to set the src of an image and print out alt next to it.

edited Apr 30 '12 at 11:21

cic

7,310
3
23
35

answered Apr 06 '12 at 00:38

Jeremy Thiesen

167
2
14

whoops, small typo: row['src'] – Jeremy Thiesen Apr 06 '12 at 00:39

score 1 · Answer 2 · edited Sep 10 '13 at 11:16

Accessify.com has a plethora of accessibility testing tools as bookmarklets (or "favelets"). One of them does what I think you are looking for. Look on that page for "Alt attributes - show all". Drag that link to your bookmarks and then use it on the page you want to test.

Also, the Web Accessibilty Toolbar (available for Internet Explorer and Opera) has a "List Images" option under "Images" that will do the same thing - list images and the code associated with each.

As for checking whole sites, there are free accessibility checkers available that should have a feature like this, like aDesigner.

score 0 · Answer 3 · edited May 23 '17 at 12:14

It sounds like you want something that works like what e.g. Jeremy provided. I.e., just some long list with each image and its alt attribute. The problem is that this will not provide you with enough context to provide an useful alt attribute, because the alt attribute should not (in general) "accurately describe [...] the image they represent", but rather describe what the image is intended to represent on the current page. It is difficult to provide a short description on how to write useful alt texts. The Wikipedia article on alt attributes itself kind of sucks in it current state, but the references are useful. There are, of course, many other SO questions related to this.

There might be some prewritten tool that does what you requested, if e.g. all pages are reachable from the start page it would be possible to just crawl the entire web site and generate the list. But if it's only possible to reach some pages by e.g. searching, some site-specific tool is probably needed.

Either way, let's assume that we have such a tool available. Even then, its use is fairly limited. Even if you can get a list of all images on the web site, with its associated alt text, you still have to visit all pages, one page at a time, and probably use some web developer extension in some browser (there are such tools provided in other answers, I think) that displays all alt texts on the page; and, then, fix the alt text, after you found out what the image is actually used for on the relevant page.

So, this tool you are requesting would only be useful for finding the pages with possible incorrect usage of the alt attribute (i.e., any page with an image on it). (But depending on the site under consideration, even this might be of some help of course.) You still need to open the web page the image is actually used on (or, if you prefer, read the HTML code for the page) to find out what the correct/better alt text would be.

So, at most you get a list of pages with images on that you have to inspect. But this will still miss some important cases, e.g. cases where the CSS background-image property is used to display a button (instead of an img image), that should have an alt text.

score 0 · Answer 4 · answered Jan 06 '11 at 15:50

0

http://sourceforge.net/projects/simplehtmldom/

I'd use something like that, very good and easy to use!

answered Jan 06 '11 at 15:50

benhowdle89

36,900
69
202
331

Great framework, but i'd like to see if there's something out there already that creates reports as well. Our last resort would be to build something. Thanks for the comment! – Alex Jan 06 '11 at 16:01
I've never come across anything like that. But it would be fairly simple to make one. Use the above library to grab all images/alts from a url you plug it and just do a simple for loop and echo
's of each img and alt side by side? That what you're after?

benhowdle89

Jan 06 '11 at 16:14

It would have to be recursive as well. – jocull Jan 06 '11 at 16:27

score 0 · Answer 5 · answered Mar 29 '18 at 09:53

You can use a powerfull JAVA API : JSOUP

Documentation for building selectors: selectors syntax

Training : online lab

For your case:

Document doc = Jsoup.connect("https://stackoverflow.com/").get();
    System.out.println(doc.title());
    Elements imgWithAltAttr = doc.select("img[alt]");
    for (Element img : imgWithAltAttr) {
        System.out.println("%s\n\t%s",
                img.attr("alt"), img.absUrl("src"));
    }

We use Jsoup in our accessibilty project : https://github.com/Tanaguru/Tanaguru

score 0 · Answer 6 · edited May 23 '17 at 12:28

0

This answer on SO some pointers on using Selenium to check your site for images with alt text present.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 10 '12 at 05:32

Don Zacharias

1,544
2
14
31

Scan site for images and alt attributes

6 Answers6