Check for alt tags with a Bookmarklet

Published: 2021-11-04

Category: Code | Tags: a11y, accessibility, alt, code, images, tool


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:

Still my favourite CSS trick in years. Thank you @estellevw!

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.
A book on a table, opened in the middle with the pages fanning out.

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

Alan Levine

Thanks for making this, it is really effective, Plus you are saving me the trouble of figuring out Tampermonkey.

Suggestions/Wishes:

it catches img where alt is empty but not one completely lacking an alt. I believe this might work to cover both (?):


         img[alt=ā€ā€], img:not([alt]) {
         ā€¦.
         }
      

If I were to really dream, Iā€™d like to toggle it on and off. Maybe an option click can undo the blur?

Comments are always open. You can get in touch by sending me an email at brian@ohheybrian.com