Check for alt tags with a Bookmarklet

tl;dr

If you want a quick way to check if images on a webpage contain alt text (for screen readers), I made a bookmarklet that will blur images without that text.

Click and drag this guy up to your bookmarks bar. Click it on any website to blurify images that are inaccessible.

altChecker

Full story

Mike Nikels tweeted this last month and it's stuck in the back of my mind:

I've been trying to be much better about including alt text in everything (thanks to Alan Levine barking about it all the time, too). I wrote a little script that runs in Tampermonkey, but that's a high barrier for entry. So is a Chrome extension.

So now it's a bookmarklet.

You can drag the mark up above into your bookmarks bar. Click it on any webpage to have any image without alt text blurred.

Here are some sites to try:

• This blog. The first image below has alt text, the second one doesn't (just to prove it works).
• YouTube.
• Any news website.
• Your favorite cooking blog.

Alt text is how images are described for people who have vision impairments. By not providing the text, they immediately lose out on whatever you're trying to say.

It's also important to remember that alt text is different that the little hover text you see when you hover an image. That's the title tag and displays. Often, the text is the same. But sites which show a title don't always include alt text as well. YouTube in particular becomes a very different experience.

Anyways, more of a little helper to keep myself from slipping. Try it out. The source is here if you want to take a look or improve.

Comments

         img[alt=””], img:not([alt]) {
         ….
         }