highlight-twitter-alt-text

This repo has some tools I use to highlight the (in)accessibility of my Twitter timeline.

Motivation

Twitter supports adding alt text to images, so they're accessible to more people -- in particular, people who are blind or low-vision, who often use screen readers.

I try to remember to add alt text to every image that I post, and I'm trying not to retweet/quote tweet images that don't have alt text -- but Twitter doesn't make this easy. The alt text isn't shown if you're not using a screen reader, so at a glance it's not obvious if a particular image does or doesn't have alt text.

This repo contains a couple of CSS and JavaScript snippets I use to make alt text more visible, or hide tweets that don't include it.

Inspiration

I didn't come up with these ideas -- I saw some tweets from @lunasorcery and @thingskatedid that put the idea in my head, and I created this GitHub repo so I had something I could easily link "here's how to highlight alt text on Twitter".

Tools

Show alt text on hover with CSS

I have a couple of CSS snippets that will highlight the presence/absence of alt text. One adds an overlay that shows the alt text on the image when you hover over the image, the other dims images that don't have any:

A tweet using add_alt_text_overlay.css

A tweet using dim_media_without_alt_text.css

I include both of these snippets in my browser's custom stylesheet on my desktop, so it applies everywhere on Twitter.

Hide tweets that don't have alt text

If you want to completely ignore tweets that don't include alt text, look at dim_tweets_without_alt_text.js. This includes a function that will hide all the inaccessible tweets on a timeline, so you can scroll past them quickly.

Here's what that looks like in practice:

This JS is a prototype; I haven't added it to my browser yet. I wrote it after a suggestion from Kate, when I thought of a neat trick for how you'd do this. You need to run it in a loop, because new tweets get added to the page as you scroll, and you want the function to pick them up.

Show alt text in a dialog box

I mostly use Twitter on my phone, which doesn't have hover states or a particularly easy way to inject custom CSS -- but it does support bookmarklets. I've written a bookmarklet which displays a dialog box showing me the alt text in any images it can find:

A tweet with no alt text using show_alt_text_in_dialog.js

A tweet with alt text using show_alt_text_in_dialog.js

I designed this bookmarklet to work in Safari on iOS, but it should be possible to make work in other browsers.

There's a bug where sometimes the alert doesn't fire -- reloading the page seems to fix it.