JavaScript bookmarklet that breaks images so you can check to see if there is visible alt text.

bookmarklet-for-breaking-images-to-check-for-visible-alt-text.md

Bookmarklet For Breaking Images To Check For Visible Alt Text

I was carrying out an accessibility evaluation of a site and, by chance, none of the images loaded. I noticed that the images' alt attributes but they weren't showing.

It turned out that the developer had put font-size:0 on the containing <figure> element and then specified a new font-size on the <figcaption> element. I don't know why either.

As current accessibility testing tools don't currently test for this (which isn't suprising as it is something of an edge case), I wrote a bookmarklet to break all the images created with an element so that their alt text (if any) would show.

The bookmarklet works by replacing each image's URL with a new one.

Plain JavaScript

var imgs = Array.from(document.querySelectorAll("img"));
for(let i=0;i<imgs.length;i++){
  imgs[i].setAttribute("src", "a11y-alt-visibilty-test-" + i + ".png");
}

Encoded Bookmarklet

This is wrapped in a link element:

<a href="javascript:(function(){for(let%20imgs=Array.from(document.querySelectorAll(%22img%22)),i=0;i%3Cimgs.length;i++)imgs[i].setAttribute(%22src%22,%22a11y-alt-visibilty-test-%22+i+%22.png%22)})();">Break imgs</a>