Scan site for images and alt attributes [closed]
Asked Answered
A

6

8

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

  1. each image tag found and a visual representation of that image on the report
  2. 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.

Air answered 6/1, 2011 at 15:47 Comment(2)
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.Nabob
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: 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).Battalion
W
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.

Walton answered 6/4, 2012 at 0:38 Comment(1)
whoops, small typo: row['src']Walton
E
1

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.

Eryneryngo answered 24/3, 2011 at 12:37 Comment(0)
S
0

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

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

Sweettalk answered 6/1, 2011 at 15:50 Comment(3)
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!Air
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 <li>'s of each img and alt side by side? That what you're after?Sweettalk
It would have to be recursive as well.Abstract
I
0

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

Interweave answered 10/3, 2012 at 5:32 Comment(0)
P
0

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.

Portraiture answered 30/4, 2012 at 19:7 Comment(0)
A
0

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

Absently answered 29/3, 2018 at 9:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.