Using buffer to set image descriptions

PUBLISHED ON 2019-03-10 — A11Y, TECHNOLOGY

Descriptions on images, also known as alt-text, are important for people reading your content using a screen reader or other assistive technology. Screen readers synthesize on-screen text, which allows people who are blind or have low vision to interact with technology. However, images cannot be “read out loud” the same way that text can, so screen readers rely on the person posting the image to set the description via alt-text, and synthesize that property instead.

This used to primarily concern designers and software developers, who would make sure that each image had its alt-text properly set so that everyone could use what they built. Now, many sites rely heavily upon user content, which means that sites leave setting the descriptions up to the users who post the images. Unfortunately, providing these descriptions is not always very discoverable – if possible at all.

A flow chart depicting an image and description pointing to buffer, which then points to Twitter and Instagram
My typical flow to share images and setting alt-text

I’ve been relying more and more on buffer to facilitate providing alt-text for different sites. This lets me set the description with services that allow it via the API (Twitter) while simultaneously sharing it to services that don’t (Instagram, LinkedIn). If sharing a link, it also gives me the ability to select what image to use from the article, and provide alt-text for that as well.

Actually figuring out how to enter a description isn’t super discoverable on desktop. You have to hover over the image itself to get the “add description” option:

The buffer web-based posting interface, with the mouse hovering over an uploaded image, which displays the hover-text "Click to expand & add description"
Adding image descriptions in a browser

I like the mobile experience better, because the option to add the description is clearly visible:

The buffer Android app interface with an image uploaded and a clearly visible button labeled "Add Description"
Adding image descriptions in the app

That’s how to set alt-text using buffer, but what should the alt-text actually be? There’s a lot of guidance online, but this site explains some best practices for crafting the text itself. My rules of thumb are:

  • Be concise: alt-text will be read out loud by a screen reader
  • Aim for parity: convey the same information that you expect the user would glean from the image
  • It’s not a caption: alt-text should provide information, not commentary

Hopefully, this gives you a strategy for making your social content accessible. I’ll cross my fingers that more platforms will add support for setting alt-text, not just in their user interfaces but in their APIs as well, so that integrations like buffer can take advantage of them. Go forth and describe!

comments powered by Disqus