Facebook

 Based on our testing, when sharing a post on Facebook, the alternative text of the linked image within the post preview is set to the og:title value. That’s the linked post title and it’s perfectly appropriate because it describes the link destination.

Let’s see an example (please consider that Facebook’s implementation may vary over time). This post on Facebook links to a BBC News page that does use an og:image:alt tag.

By inspecting the page source, we can see the tag content value:

<meta property="og:image:alt" content="People walk on hot coals in Lithuania">

However, the text People walk on hot coals in Lithuania isn’t used anywhere on the Facebook share. Instead, the linked image alternative text is set to the value of the og:title tag:

Hot coal walk leaves 25 injured in Switzerland

Thankfully, I’d say, because the og:image:alt refers to Lithuania while the news is about people injured in Switzerland!

Providing the og:image:alt tag for Facebook seems a bit pointless, as it’s not used.

Twitter

The Twitter implementation is a bit more complicated from a technical perspective. It seems that it does use the og:image:alt tag and adds its content to the link labeling mechanism, which is incorrect.

A Twitter card is made of two main sections. The first one contains the linked image. The second one is the card footer, which is a link that contains the post title and the post description:

Technically, the linked image is not exposed to assistive technologies such as screen readers, because:

• The linked image is placed within a container element with an aria-hidden="true" attribute, which hides it from assistive technology.
• The link itself is moved out from the keyboard Tab order by the means of a tabindex="-1" attribute.

The whole ‘card’ container element is clickable via JavaScript. The container element is then labeled by the means of an aria-labelled attribute that references both the first section of the card (the image container) and the second section (the footer).

The important thing to understand is that assistive technology will announce the card container using the content of the elements referenced by the aria-labelledby attribute. Specifically, they will announce, in the following order:

• The alternative text of the linked image in the first section, as provided by the og:image:alt tag.
• The entire textual content of the card footer.

When sharing on Twitter our BBC News post example, the actual text that labels the Twitter card would be:

People walk on hot coals in Lithuania bbc.com Hot coal walk leaves 25 injured in Switzerland The group suffered burns after walking over a bed of coals as part of a team building exercise.

That’s incorrect because it adds the image content description to the link destination description. Also, this specific example would definitely be confusing. Again, is it about Lithuania or Switzerland?