How to define Open Graph / Twitter image alt text (and why it might not matter...)
Tags: webdev, a11y
Published: 2021-05-14 16:06:25

---
title: How to define Open Graph / Twitter image alt text (and why it might not matter...)
published: true
description: Learn how to define alternative text for Facebook/Twitter previews and discover that it's not improving accessibility.
tags: webdev, a11y
canonical_url: https://www.stefanjudis.com/today-i-learned/how-to-define-open-graph-twitter-image-alt-text-and-why-it-might-not-matter/

---

You know all these fancy link previews that you see on social media when people share articles and resources, right? These previews are based on various meta elements defined in your website's `head`. You can define the Twitter card layout using `<meta property="twitter:card" content="summary_large_image">`, specify the Facebook preview image with `<meta property="og:image" content="https://.../your-image.jpg"/>` and many more configuration options. 

![Example of a Twitter card preview.](//images.ctfassets.net/f20lfrunubsq/59yNEa6BuvIHW6OVgYPuM6/68a43de0febd017c8462404745403d1e/Screenshot_2021-05-14_at_17.41.21.png)

Read more about the details in the documentation:

- [the Open Graph Protocol](https://ogp.me/)
- [Twitter cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup)

Recently I learned that the two standards (Open Graph and Twitter cards) support alternative text for preview images. I want to be a good web citizen and implemented it right away.

Unfortunately, I discovered that the alternative text definition might not matter much for Facebook or Twitter. That's a bummer; read on to learn more. 😉

## Open Graph and Twitter cards support image alternative text

Thanks to my friend Feli (and Lea Rosema and Manuel Matuzović) I discovered Open Graph's `<meta property="og:image:alt " content="Your image alt text"/>` element.

[She tweeted the following](https://twitter.com/kotzendekrabbe/status/1389142654395555841). 👇

![Feli's Tweet: "TIL Open Graph Tags provide alt for images og:image:alt. Thank you @terabaud for letting me know ♥️"](//images.ctfassets.net/f20lfrunubsq/3Uy58qYA5gaaLlhOZUOqtl/34afe922dfbba152bf1d68a7cdd61729/Screenshot_2021-05-14_at_15.33.52.png)

It turns out that not only Open Graph but also Twitter allows alternative text using `<meta property="twitter:image:alt" content="Your image alt text">`. 

That's very exciting! Ideally, these meta elements would allow us to define the alternative text for the images displayed on Twitter and Facebook to make them more accessible for assistive technology.

Let's look at how Facebook and Twitter render my site's URL previews!

## The image alt text might not make a big difference for assistive technology

Let's have a look at how Facebook and Twitter render image alternative text in their previews.

### Twitter's preview cards

I went to [the Twitter Card validator](https://cards-dev.twitter.com/validator) to check my site, and it looked great!

![Twitter Card Validator showing the correctly displayed alt text define in meta elements.](//images.ctfassets.net/f20lfrunubsq/7rKMZIpScuRku3qBT1nz9h/9c327165ebb197eab80520b0dad13eff/Screenshot_2021-05-14_at_16.29.52.png)

The alternative text was set correctly in the validator preview. The next step was to check how Twitter renders the previews inside of their UI.

Twitter caches all their previews for a while, and because I just deployed the `twitter:image:alt` I couldn't check if it's rendered the same way the validator did. 

Nevertheless, I still had a look at the rendered HTML and found out that Twitter renders the preview image in many many divs and one of them includes the `aria-hidden="true"` attribute. 😲

![Twitter markup showing the surrounding div including an aria-hidden="true"](//images.ctfassets.net/f20lfrunubsq/2jhHTZcJT8EQp6I4Zhn5ju/999ae22c868bd9141de2c552af1c5270/Screenshot_2021-05-14_at_16.43.16.png)

[`aria-hidden` removes the element and all its children from the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute). That means that the new alternative text (if it shows up) won't improve the screen reader experience because screen readers won't discover the image after all. 

*Edit: Twitter uses `twitter:image:alt` to define the preview image alt text. 🎉*

This discovery was disappointing, but I moved on to Facebook to find some improvements over there.

### Facebook's link preview

Similar to Twitter, Facebook also provides a preview tool – [the sharing debugger](https://developers.facebook.com/tools/debug/). I checked one of the URLs that now include `og:image:alt`. Everything showed up correctly in the debugger's info section. 🎉

![Facebook debugger preview showing the correct content for og:image:alt](//images.ctfassets.net/f20lfrunubsq/1ks6Hip3LaZJG2HY5xaPRc/b1222700db8cff64a5e4e1d1956ffe87/Screenshot_2021-05-14_at_16.57.26.png)

Unfortunately, the alternative text was not showing up in the debugger's preview. I shared a URL on Facebook to see my new alternative text in production. Luckily the image doesn't seem to be hidden from the accessibility tree, but(!) it appears that Facebook uses `og:title` instead of `og:image:alt` for the image alternative text. 😢

![Facebook UI preview showing that og:title is used for the image alt text.](//images.ctfassets.net/f20lfrunubsq/42aeQPbqcglNLjOOt9LjEh/b17bcd95bf7a88ace40d5e9d1dc6b609/Screenshot_2021-05-14_at_17.04.50.png)

I guess too few people are using `og:image:alt` so that Facebook goes with the title to be on the safe side. 

These two discoveries bring up the question: __should we bother implementing social media preview alternative texts if it doesn't improve the previews' accessibility__?

## Conclusion

I will keep the `og:image:alt` and `twitter:image:alt` meta elements on my site. The elements are not harming the overall experience (I'm ignoring the few bytes of additional HTML), but unfortunately, they're not making social media previews more accessible either. 

If Facebook and Twitter change their implementation in the future, I'll be ready with correct alternative texts at least.

---

Side note: [John Kemp Cruz also pointed out that Twitter falls back to Open Graph for particular properties](https://twitter.com/jkc_codes/status/1393234667206320132). Good to know!