Seeing The Web As it Looks Without Image Alt Text

I’m no guru on web accessibility, most of my projects likely will fail to meet the standards. But I am more interested in the small things we can and ought to do to at least try better.

Somehow in the last year that has popped up for me a few times looking at how Twitter makes partial attempts at providing the means for making images tweeted more accessible, but seeing it fall short in use.

It’s again the Pogo problem

I have found for my own habits, the perfect incentive is following the bot account @AltTxtReminder that simply sends you a DM if you tweet and image without an alternative description. There is no public shaming like some of the grammar bots. I find it effective in deterring me from being lazy.

But then I saw something nifty created by Brian Bennett– he has an old school bookmarklet that can be used when viewing a page, and it will blur any image that has a blank alt value. That is effective too, because it puts you in the spot of deciding if the page makes sense when the images are not discernible.

It’s all done by CSS- it selects any img that has an empty alt tag, and then dynamically adds CSS to blur said image.

I noticed a small thing, the selector Brian used is img[alt=''] which will select any image that has a blank alt tag, like:

that is what Twitter, WordPress produce for an image missing an alternative description. But it would miss an img tag that had nothing in it.

I let Brian know, but in the meantime, for my own experimentation, I forked his gist code into my own version where the selector should get both cases, via img[alt=''],img:not([alt].

You can make the bookmarket your own, by dragging this button to your browser bookmarks bar.

If I were more clever, I’d like to add a means to toggle it on and off, maybe that would be with some kind of alt key check? That’s for another day.

As Brian notes in his post, pretty much all of YouTube goes blurred

It does not have any effect on Twitter! That does not mean they have achieved total accessibility, my guess is the web content is dynamic and the bookmarklet cannot select the images, or maybe there’s something else at play.

This is fun (not), as it appears from my tests that CBC news has zero alt text descriptions – I did a full screen capture of the page as it loaded (for the sighted) and after with the blur on to show that every single image (ads too) lack alt text. Here it is a GIF:

I am not sure how effective this is, but I am interested to be toggling it often. Will this make a difference? Well, only if you decide to change habits.

Going back to twitter, when I was checking the link for @AltTxtReminder it’s tweets described a “sister-bot” that does some interesting tricks. You can tweet or DM @AltTextCrew for some nifty tricks. It can return the text of those rare tweeted images that have alt text, but even more interesting, it can do OCR on any tweeted image, and return the text.

Usage:

Reply+tag with:
– "OCR" to extract text from any images
– "Analyze Links" to check links for alt text usage

DM:
– "OCR <tweet or image URL>" to extract text from tweet images or image on the web
– "Check <tweet>" to get alt text on tweeted images if any

— Alt Text Utilities (@AltTextUtil) November 23, 2021

I’ll leave it as an exercise for the Tweeter to experiment with ths, but it works, and is fast.

The other impressive thing is that both of these bots are running on glitch (see the twitter bios of each bot for links). This is ab impressive level of functionality for a free service.

I gotta up my glitch game.

Until then, just keep alt-ing, make it a habit.

---

Featured Image: Through the Specs Clearly flickr photo by cogdogblog shared under a Creative Commons (BY) license with some extra blur added inside the specs.