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

My YouTube home page where all suggested videos are blurred as are user icons. This means they lack alt tages.
Way to go Google, don’t you have more engineers and money than God? Why not be accessible?

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:

The entire CBC news page as a two frame animation showong that when my bookmarklet is applied every single image is blurred, this means 0 for everything.

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.

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.

A hand on the left holds a pair of eye glasses looking at a view of a beach, but the view through the glasses is blurred
If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. I like it. I need to rethink some experiential accessibility options like this for a workshop.

    As for Glitch, agreed. I did the first Slack/WordPress connector in there but then moved it to Heroku. I need to go back. I love Codepen for little experiments. Feels like Glitch takes it up a notch or six.

  2. I finally got around to doing this on mine, thanks again for the heads up. I also tried to update my copy to pull from a github gist so it’s easier for people to contribute improvements, but alas, loading scripts from other Internet places is harder to do every day (and for good reason).

Leave a Reply

Your email address will not be published. Required fields are marked *