A quick Slack tutorial on image alt text

A screenshot of the image, open, with the file name and a link to edit file details at the top. Select edit file details.

Please feel free to share this with your Slack teams, because alt text is important. [1]A link back to us would be nice! But not required! Alt text is required!

What’s in it for me?

  • If you add alt text to your images they’re easier to search.
  • They ensure that if something prevents the image from loading (like your boss is traveling somewhere with spotty wifi and needs this info) the description is still available
  • When your coworkers with low vision or blindness go back into the archives, you’ve already made the images work for them

How do I do it?

  1. When you upload an image, click the thumbnail.
  2. On the image dialog click Edit File Details.
  3. Fill in a description.  When writing alt text, the most important part is “What is this image telling the user that they need to know?” It’s much less important, for example, to say “Screenshot of the homepage” than it is to say “this screenshot of the homepage shows the font is not loading correctly”

Here are some images of the process with the alt text repeated in the caption space so you can copy/paste the alt text if you want for your own site.  Apologies to those of you using screen readers for the duplicate content.

A screenshot of the text field in slack with a thumbnail of an uploading image in it. Click that puppy.
A screenshot of the text field in slack with a thumbnail of an uploading image in it. Click that puppy.
A screenshot of the image, open, with the file name and a link to edit file details at the top. Select edit file details.
A screenshot of the image, open, with the file name and a link to edit file details at the top. Select edit file details.
A screenshot of the file details dialog with the image in the background. The file details field has the file name preloaded in an editable file name textfield and then provides a description textarea. The description's description is "a description (or alt text) helps people who cannot see or parse this image understand what you're sharing. Consider the information in the image, and convey it as concisely as possible." Below are a cancel and a save changes button.
A screenshot of the file details dialog with the image in the background. The file details field has the file name preloaded in an editable file name textfield and then provides a description textarea. The description’s description is “a description (or alt text) helps people who cannot see or parse this image understand what you’re sharing. Consider the information in the image, and convey it as concisely as possible.” Below are a cancel and a save changes button.

Notes

Notes
↑1 A link back to us would be nice! But not required! Alt text is required!

Author: Anne Gibson

Anne Gibson is a Senior Staff Product Designer and General Troublemaker working on design systems from outside of Philadelphia, Pennsylvania. She's an editor and writer at The Interconnected. She is also published at A List Apart and The Pastry Box, and publishes short fiction when she's not persuading the terriers to stop wrecking things. (The terriers are winning.)