Do you use Gmail? We do. And, like everything else we create we want our Gmail messages to be accessible too.
Here at David Berman Communications, inclusive thinking is in our DNA. The presentations we give at conferences, as well as our training, auditing, and remediation for our clients, all require being up-to-date and informed on the latest accessibility techniques. So, of course, we want our outbound email to be accessible too.
We used to mainly use Thunderbird as our email program, but now we send most of our email from Gmail. And although Gmail includes many magical features, it sadly doesn’t include a way to add alternative text to an inline image.
Alternative text is especially important for images in email. Why? Here’s an example of what your audience may experience without alternative text (whether they can’t see or because they simply have the “Always Display External Images” setting turned off in their Gmail settings … perhaps to save data or to avoid suspicious content).
The Problem: Consider the above pair of screen captures of an email from Stardock. In the first one, there is no way to download the product that they are urging you to try: The text says “To the right is a link to download…” but there is nothing there to see. Only when we turn on “Display Images” in Gmail (resulting in the second screen capture) does the “Download Now” button appear. And if the audience is using a screen reader, even that won’t help, because the “Download Now” graphic lacks alternative text.
The Solution: We’ve developed an easy recipe for you to add alternative text to every image you add to your outbound Gmail. No matter who is receiving your message or whatever email software they are reading it with, your images will carry the same quality of alternative text that you’d insist upon in every web page or document. Enjoy!
How to add alternative text to images in Gmail for Windows … or Gmail for Android
Ingredients
- Gmail on your Windows or MacOS desktop … or Gmail for Android (sadly not Gmail for iOS: you can follow these steps on Gmail for iOS but the resulting message will not have the alternative text.)
- Any image
- Alternative text for the image
Steps
- Using the Gmail app on your desktop or Android, compose an email just as you always would … but don’t add any images yet.
- Decide what image you want to include in your email (for example, a photo of an otter).
- Using Google Docs on any platform, put the image you wish to email into any Google Doc document you have access to.
- If your image in Google Docs does not already have Alt Text, give it Alt Text… here’s how: Using Google Docs on desktop (unfortunately, you cannot do this on Android), select the image (type Ctrl+Alt+Y …or right-click then select the Alt Text command) to bring up the Alt Text window. Then type appropriate Alt Text into the Description field (not the Title field!). (Need guidance on how to write great alternative text? Ask us about our Helpdesk Guide). Tip: Once you’ve added alt text to an image in Google Docs, copy-and-pasting it from Google Doc to Google Doc will also retain its alt text! Yay!
- Copy and paste the image from the Google Doc into the Gmail message you are composing, wherever you’d like it to appear.
- Send: you’re done!
Tasting
Here’s an example of how your resulting message will look, with an without the image present… The first of these two images is what your message looks like with images visible, and the latter is what everyone experience when images or turned off (or what a screen reader will announce)
Testing
Want to convince yourself your Alt Text is actually there? There’s no way to see it in the Gmail interface; however, if you’re technically-inclined, you can use the Inspect command in Chrome to view the source code of your message: search for “alt=” and you’ll see your alt text in the underlying code).
If you’re curious to experience the alt text in the received email message in Gmail (because you won’t “see” the alternative text in the regular view unless you’ve turned off the option to display images), go to the Show Original command and search for “alt=”.
A big shoutout to Lucia Greco from AccessAces, whose posting on this inspired us to figure this out!
For more accessibility recipes, visit our Accessibility Cookbook page.
Would this tip help others? Forward this as widely as you’d like, and subscribe for future recipes at davidberman.com/subscribe .