I am a happy fediverse user, and one of the things I really like about it is that many people add high quality alt text to their posts, to make them accessible.

I don’t tend to boost posts containing images with no alt text (I appreciate that not everyone can add alt text).

I wanted to experiment with not seeing those posts at all, thus removing the temptation to boost them / chance to boost them if I don’t spot the lack of alt text.

uBlock Origin code

When I’m using my computer, I use the Mastodon advanced web UI, in Firefox, with the uBlock Origin add-on, so that seemed like an obvious place to start.

I asked if anyone else had tackled this. And they had.

With many thanks to Xavier for a solution:

##article div.media-gallery img:not([alt]):upward(div.status)

So, for me, in uBlock Origin’s console, it is:

mastodon.neilzone.co.uk##article div.media-gallery img:not([alt]):upward(div.status)

I’ve tested this for a while, and this works.

If you do try it, note that if a post has multiple images, and one or more of those doesn’t have alt text, the post is hidden. You don’t get to see the images with alt text.

And, perhaps obviously, this has no impact when I use Tusky on my phone.

If you want to keep the post, but have it replaced with a black box, this works (with thanks to Emelia/Emi!):

##img:not([alt])

But Emelia/Emi notes:

that will block all images without alt-text though, including a lot of button icons and the like.

Highlighting images without alt text with custom CSS

If you have admin rights over your Mastodon instance, you can use custom CSS to change the look of the web UI.

Fedi user Flippin’ eck, Tucker! offered this snippet, to give a black-and-yellow border to images without alt text:

/* add black/yellow "caution tape" to images without alt text */
.audio-player__canvas:not([title]),.audio-player__canvas[title=""],.media-gallery__gifv video:not([title]),.media-gallery__gifv video[title=""],.media-gallery__item-thumbnail img:not([alt]),.media-gallery__item-thumbnail img[alt=""],.video-player video:not([title]),.video-player video[title=""] {border: 6px solid pink; border-image: repeating-linear-gradient(-55deg, #000, #000 20px, #ffb101 20px, #ffb101 40px)10;box-sizing: border-box;}

More help with uBlock Origin

Xavier also said:

Have a look at https://letsblock.it/ for uBO rules for other websites.

And it does look useful!