Keeping it simple with image alt text for accessibility

— 2 minute read

We’ve watched a mass outage of media on Facebook, Instagram and WhatsApp unfold over the last 24 hours and something it exposed is Facebook’s use of AI for image alt text. The alt text is often completely inaccurate and really unhelpful for users who need it the most, which to me, feels like a very negative thing. In my opinion, it’s just another example of over-engineering what should be a reasonably trivial accessibility problem.

Why don’t Facebook and Twitter make adding alt text a requirement for posting images? I suppose it would damage those all important OKRs and KPIs, which as we all know by now, are apparently the only focus for these toilet companies. We shouldn’t waste any energy on hoping that companies like these will do anything remotely ethical in the future, so, sorry to say it folks, but the onus is on us: the individuals to make a difference with accessibility.

Focusing on us, the individuals: some general ownership, empathy and knowledge would go a long way. Developers should really be asking themselves “is this image decorative or informative?”. If the answer is decorative, an empty alt (alt="") will hide it from a screenreader. I personally like to add an aria-hidden="true" for good measure in that context, too. If it’s an informative image: spend some time writing some genuinely helpful alt text. In the words of the great Roy Walker:

”Say what you see”

Wrapping up permalink

The few seconds that it takes you to do add some helpful alt text or apply an empty alt attribute will make folks who need alt text’s experience on your website that little bit better. Small tweaks like this that make accessibility better at its most basic level, chip away at what can be a very hostile environment for people who use assistive technology.

We can all do it, too. We can all make a genuine, positive impact.

Hi 👋, I’m Andy — an educator and web designer

I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.

Sign up for updates