og:image の代替テキスト（og:image:alt）

デベロッパー向けのCards markup(developer.twitter.com)を見ると、og:image:alt の記述はなく、代わりに twitter:image:alt が定義されています。しかし実際に試してみると og:image:alt も認識しました。

URL付きのツイートをしてみると、画像部分のマークアップはこんな感じになります。

• 実際はもっと複雑ですが、例示のため余計な要素や属性を削除しています。

<div><!-- ← ここにフォーカスが当たる -->
  <div aria-hidden="true">
    <a href="{ url }"><!-- ← ここにはフォーカスは当たらない -->
      <div aria-label="{ alt }">
        <img alt="{ alt }" src="{ image }">
      </div>
    </a>
  </div>
  <div>
    <a href="{ url }">
      <span>{ title }</span>
      <span>{ description }</span>
    </a>
  </div>
</div>

og:image:alt がない場合、あるいは og:image:alt の値が空の場合は alt 属性値と、その親要素の aria-label 属性値が空になります。

    <a href="{ url }"><!-- ← ここにはフォーカスは当たらない -->
      <div aria-label="">
        <img alt="" src="{ image }">
      </div>
    </a>

このHTML断片だけを見ると、一見ダメなやつに見えます。具体的にはHTML仕様の4.8.4.4.2 A link or button containing nothing but the imageにあるように、 <a href> の中身が画像のみの場合、その alt 属性値はリンクの目的を伝えるテキスト（リンク先のページタイトルとか）を含まなければなりません。

しかし、実際にはこの <a> 要素にはフォーカスが当たらず、その祖先の <div> 要素にフォーカスが当たります。たぶん JavaScript でゴリゴリやっているのでしょう。そして、フォーカスの当たる <div> 要素（事実上の <a> 要素）は内部に og:title などの値を含んでいるのでそちらが読まれます。

逆に言えば、 og:image:alt を設定しても、それがHTML上には現れるものの実際に読み上げられることはありません。視覚的にも、<img> に対して opacity: 0 が指定されているため、画像が読み込まれない環境でも alt 属性値は見えない状況です。

要するに、 Twitter は og:image:alt に対応はしているものの、閲覧するユーザーにとっては未指定と変わらない状況のようです。

ウェブ管理者向けシェア機能ガイド(developers.facebook.com)には og:image:alt の記載はありません。シェアデバッガー(developers.facebook.com)で試してみましたが、 og:image:alt の指定は無視されるようです。

シェアデバッガー上の画像部分のマークアップはこんな感じです。

• 実際はもっと複雑ですが、例示のため余計な要素や属性を削除しています。

<a href="{ url }" aria-describedby="{ ID }" aria-label="{ title }" tabindex="-1">
  <div id="{ ID }">{ description }</div>
  <img src="{ image }" alt="">
</a>

リンクアンカー内に存在する画像の alt 属性値が空になっていますが、別途 <div> 要素に og:description の値が入っており、また aria-label に og:title が指定されているので、画像非表示環境やスクリーンリーダーの読み上げでも問題は起こらないと思います。

• 仮に問題あったとしても、そもそも og:image:alt が無視されるので、ページ制作者としては対処のしようがないですが。

もう mixi やっていないので実際のところは分かりませんが、デベロッパー向けの Specification(developer.mixi.co.jp)には og:image:alt の記載はありません。