ファミリーマートの公式Twitterのツイートに、画像の代替テキストを改善できそうなツイートがありました。
この記事では画像の代替テキストのどういった点が惜しいのか、またどのように改善すればいいのか、私見を書きます。
※貶すつもりは全くなく、あくまでツイートを元にどういった代替テキストを書けば良いのかを考える記事です。
<h2>どのようなツイートか</h2>
ファミリーマート公式Twitterの該当ツイートを引用します。
<blockquote class="twitter-tweet">これが、からあげの正解。 ファミから。 そのこだわりのすべてをALTでチェック。 <a href="https://t.co/TalY56q5PX">pic.twitter.com/TalY56q5PX</a>&mdash; ファミリーマート (@famima_now) <a href="https://twitter.com/famima_now/status/1534686713787711491?ref_src=twsrc%5Etfw">June 9, 2022</a></blockquote>
※ツイートが削除されたので<a href="https://web.archive.org/web/20220609000048/https://twitter.com/famima_now/status/1534686713787711491">インターネットアーカイブに残っているツイート</a>を貼っておきます。
ツイートを一目見ただけだと、ファミからというファミリーマートで売られている唐揚げの写真が4枚並んだツイートです。
ただしツイートにもある通り、ファミからのこだわりが代替テキストに書かれていて、ツイートの画像上にあるaltボタンを押すとこだわりが見られるツイートになっています。
<h2>なぜ代替テキストの使い方が惜しいのか</h2>
4枚目のお皿の上に唐揚げがたくさん乗っている画像の代替テキストとして「食べてください」を連続して書くことは、画像と代替テキストの内容が一致せず、特定の状況・状態では正しい情報が伝わらなくなります。
また、1枚目の湯気が立ち込めた唐揚げを切った断面のドアップ画像・2枚目のファミからのパッケージ画像・3枚目の唐揚げが中央にあってドアップになっている画像は、画像で示している内容も代替テキストに書かれていますが、画像にはない情報や宣伝文句のような文章も書かれています。
画像と代替テキストの内容が一致していないのは、テキストが画像の代替という役目を果たせないことになります。
また画像にない情報や宣伝文句も代替テキストに含んでしまうと、TweetDeckや非公式アプリを使っている晴眼者は代替テキストに書かれた文章を見れず、伝えたい情報を伝えられないことになります。
<h2>そもそも画像の代替テキストとは？</h2>
画像の代替テキストはなんらかの状況・状態で画像が使えないときに、設定した代替テキストが使われます。
どういった状況・状態で代替テキストが使われるか一例を挙げます。
<ul>
<li>スクリーンリーダーを使っている場合に、画像の代替テキストが読まれる</li>
<li>通信速度が遅く画像表示まで時間がかかる場合に、画像の代替テキストを表示する</li>
<li>CDNに障害が起きて画像が表示できない場合に、画像の代替テキストを表示する</li>
<li>Webブラウザーで特定の画像形式に対応していない場合に、画像の代替テキストを表示する</li>
<li>w3mやLynxなどのテキストベースのブラウザーで、画像表示に対応していない場合に画像の代替テキストを表示する</li>
<li>検索エンジンのクローラーが、画像の代替テキストを元に画像の情報を得る</li>
</ul>
HTMLにおいては、img要素のalt属性の値に画像の代替テキストを設定します。
画像の代替テキストの書き方として<a href="https://html.spec.whatwg.org/multipage/images.html#alt">HTMLの仕様</a>には次のように書かれています。
<blockquote lang="en">
One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
</blockquote>
同じ部分を<a href="https://momdo.github.io/html/images.html#alt">日本語訳されたHTMLの仕様</a>を見てみると次のように書かれています。
<blockquote>
代替テキストを考える1つの方法は、画像の存在があることを言及することなく、電話で誰かに画像を含むページをどのように読むかを考えることである。通常、画像の代わりにいうものは何でも、代替テキストを記述するための良いスタートである。
</blockquote>
さてTwitterの話に戻ると、画像の代替テキストのことを「画像の説明」という言葉で説明しています。
Twitterのヘルプにある<a href="https://help.twitter.com/ja/using-twitter/write-image-descriptions">良い画像の説明を作成する方法</a>を引用すると、「画像の説明は、目の不自由な方や弱視の方、ユーザー補助テクノロジーをご利用の方、低帯域幅の地域にお住まいの方、さらなる背景情報を求めている方の一助」向けの機能と書かれています。
Twitterの画像の説明も、HTMLのimg要素のalt属性に指定するような文言を書くことを意図していそうです。
<h2>どのように代替テキストを改善するか</h2>
ここまで書いたことを踏まえて、ファミリーマートのツイートの画像の代替テキストを考えてみます。
<h3>ツイートで何を伝えたかったのかを考える</h3>
ファミリーマートのツイートですが、製品の美味しさやシズル感を伝えたかったと推測します。
製品のストーリーを伝えることで製品開発者の熱い思いがこのツイートを見た人達に伝わって、好意的な印象を持つことで実際の購入に至ってほしい考えがあったと考えます。
こういったストーリーをTwitterで書くには、Twitterに投稿できる文字数では足りなさそうです。しかしストーリーを別途書いておく特設ページが用意できなかったのかもしれません。
そのため、altボタンを押すと見られるようにすればいいというTwitter運用担当者の工夫があったと考えられます。
また4枚目のお皿の上に唐揚げがたくさん乗っている画像の説明では「食べてください」を連続して書くことで、altボタンを押した人達を驚かせたり、クスっと笑わせたりという公式アカウントがおちゃめなことをしているというギャップを感じさせたかったと思います。
実際リプライで<q>4枚目ホラーで草</q>というツイートがあり、これはTwitter運用担当者が意図した反応だと考えられます。
<h3>代替テキストの改善例</h3>
というわけで、自分が考える代替テキストの改善例を書きます。まずもう一度ツイートを引用します。
<blockquote class="twitter-tweet">これが、からあげの正解。 ファミから。 そのこだわりのすべてをALTでチェック。 <a href="https://t.co/TalY56q5PX">pic.twitter.com/TalY56q5PX</a>&mdash; ファミリーマート (@famima_now) <a href="https://twitter.com/famima_now/status/1534686713787711491?ref_src=twsrc%5Etfw">June 9, 2022</a></blockquote>
※ツイートが削除されたので<a href="https://web.archive.org/web/20220609000048/https://twitter.com/famima_now/status/1534686713787711491">インターネットアーカイブに残っているツイート</a>を貼っておきます。
このツイートにある画像の代替テキストを書くのであれば次のようにするかもしれません。
<ul>
<li>画像1枚目の代替テキストは「唐揚げの断面がドアップになっていて、断面から湯気が出ている様子」</li>
<li>画像2枚目の代替テキストは「ファミから醤油味とファミから塩味のパッケージ」</li>
<li>画像3枚目の代替テキストは「唐揚げが中央にあり、その唐揚げから湯気が出ている様子」</li>
<li>画像4枚目の代替テキストは「白いお皿の上に唐揚げがたくさん乗っていて、その後ろに付け合わせの野菜がある」</li>
</ul>
電話口の相手に伝える感じだと、こんな感じで書けば伝わりそうです。
また4枚目の「食べてください」を連呼する形式を活かすのであれば、スマートフォンのメモアプリに「食べてください」とひたすら書いたものをスクリーンショットという形式で投稿して、代替テキストに「食べてください」をひたすら書く形式がありそうです。
<h2>おまけ: 自分が思う良い感じの代替テキスト</h2>
まず<a href="https://twitter.com/zennoh_food">全農広報部【公式】日本の食を味わう</a>のツイートが挙げられます。
<blockquote class="twitter-tweet">フライパンでできるサラダチキンの作り方、ご紹介しています。今月の広報誌エプロンです。サラダチキンは鍋で茹でるイメージでしたが、フライパンでできるんですね。夏場、お湯を沸かすと思うと一気に腰が重くなりますがフライパンなら…なんとか…！(フライパン大好き民)<a href="https://t.co/5EWrikEpd2">https://t.co/5EWrikEpd2</a> <a href="https://t.co/7vtZqbhX2z">pic.twitter.com/7vtZqbhX2z</a>&mdash; 全農広報部【公式】日本の食を味わう (@zennoh_food) <a href="https://twitter.com/zennoh_food/status/1544115957634723840?ref_src=twsrc%5Etfw">July 5, 2022</a></blockquote>
画像の内容が代替テキストでも過不足無く表現されていると感じます。
他のツイートだと、にじさんじ所属のVTuberである壱百満天原サロメのツイートが挙がります。
<blockquote class="twitter-tweet">きょうのおまんが、ホラー回と言われていてにっこりしてしまったので、おまけですわ😊 <a href="https://t.co/nfShKjKWw7">pic.twitter.com/nfShKjKWw7</a>&mdash; 壱百満天原サロメ💯🦂 (@1000000lome) <a href="https://twitter.com/1000000lome/status/1543884318765891584?ref_src=twsrc%5Etfw">July 4, 2022</a></blockquote>
画像の内容を全て書いているわけではないですが、漫画で伝えたいことを表現できている代替テキストで百満点ですわ～！
<h2>まとめ</h2>
代替テキストは人によって考え方にばらつきがありますし、状況によっても代替テキストの内容が変わるので、一概にこれが正解とは言いづらいものです。
ただ適切な代替テキストを設定することで、より多くの状況・状態にある人に伝えたいことを伝えられるようになります。
代替テキストを設定したことがない人は、とりあえず代替テキストを一度設定してみると面白いかもしれません。
<h2>参考リンク</h2>
<ul>
<li><a href="https://help.twitter.com/ja/using-twitter/write-image-descriptions">良い画像の説明を作成する方法 | Twitterヘルプ</a></li>
<li><a href="https://yuugop.com/articles/practicalaccessiblehtml/pah01.html">altはつけるだけじゃなくて - 実践アクセシブルHTML 第一回</a></li>
<li><a href="https://www.slideshare.net/nozomisawada969/ss-122034985">代替テキストの基本から応用まで</a></li>
</ul>

ファミリーマート公式Twitterのツイートからより良い画像の代替テキスト(alt)を考える

Twitterのトレンドは見るたびにイラつきを覚えます。そんなにイラつきを覚えるようなら見なければいいし、そもそもTwitterをやめろという話かもしれません。
ただ次のツイートにあるようにある意味で期待通りの報酬を得られる行為となります。
<blockquote class="twitter-tweet">インターネットでQOLを1番下げる行為は、間違いなく「嫌いな人間/集団/コンテンツを自分から見に行って、嫌なものを見つけて、嫌なのを確認する」事なんだけど、これはある意味で「期待通りの報酬を得られる」行為なので、常習化を招きやすいんだよな。人生には得てはいけない成功体験があるというな。&mdash; rei@生きてるだけで疲労困憊発売延期 (@rei10830349) <a href="https://twitter.com/rei10830349/status/1178553747770753025?ref_src=twsrc%5Etfw">September 30, 2019</a></blockquote>
そのためTwitterのトレンドを見てしまうことが多くトレンドを見るたびに後悔していました。ただやめられなくなっていて正直なところ常習化していました。
<h2>なぜTwitterのトレンドを見てしまうのか</h2>
TwitterのページをWeb上で見ると自然とトレンドが目に入ってきます。普段見ているTwitterの画面は画像の通りだと思います。
<img src="https://blog-assets.kubosho.com/twitter_home_before.png" alt="CSSを調整する前のTwitterは3カラムになっている">
左サイドバーにナビゲーション、中央にツイート一覧、そして右サイドバーにTwitter内の回遊リンク一覧がある構成です。
この構成だと右サイドバーのTwitter内の回遊リンク一覧が目に入ります。特に「いまどうしてる？」というタイトルが付けられたTwitter内のトレンド一覧が目に入ります。
これはTwitter側でトレンドを見てもらうことでTwitter内を回遊してくれて、結果としてTwitter内で追っているKPIを達成できるというデータがあるのでしょう。なので目に入る位置にトレンドがあるのと、トレンドの先頭は広告枠になっているのだと思います。
ただTwitterのトレンドを目に入れたくない立場からすればとにかく消えてほしいものです。あとついでにおすすめユーザーも邪魔な気がしてきました。
<h2>Twitterのトレンドを視界から消す(ついでにおすすめユーザーも)</h2>
ということでTwitterのトレンドを視界から消します。
今回は<a href="https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja">Stylus</a>を使って、Twitter側で定義されているCSSを上書きしてTwitterのトレンドのみならず右サイドバーごと非表示にしました。
なおTwitterのトレンドを消す方法として、Chrome向けのTwitter拡張機能である<a href="https://chrome.google.com/webstore/detail/calm-twitter/cknklikacoaeledfaldmhabmldkldocj?hl=ja">おだやかTwitter</a>や<a href="https://chrome.google.com/webstore/detail/simplified-twitter/kfopmjhmejbgomgeajemgpgpbckpoopg/related">Simplified Twitter</a>を入れる方法や、<a href="https://www.tsukutarou.net/entry/Twitter-Trend-Shutout">地域を変更してトレンドのみ表示できないようにする</a>方法もあります。
<h3>Twitterの右サイドバーを削除するときの課題と解決方法</h3>
TwitterはReact Native for Webを使っています。
<blockquote class="twitter-tweet">If you use Twitter Lite you&#39;re now using a web app rendered by React Native for Web&mdash; Nicolas (@necolas) <a href="https://twitter.com/necolas/status/913877194199359488?ref_src=twsrc%5Etfw">September 29, 2017</a></blockquote>
これは今も変わってなさそうでHTMLに定義されているクラス名はランダムな文字列です。
このためクラス名を元にスタイル定義をすると、将来の変更でスタイルが適用されなくなりそうです。
そのためStylus上で <code>data-*</code> 属性のセレクタに対してスタイル定義をすれば将来的に壊れにくくなりそうという考えを持ちました。これに従って書いたCSSは次の通りです。
<pre class="language-css"><code class="language-css">[data-testid='primaryColumn'] {
 max-width: 600px;
}

[data-testid='sidebarColumn'] {
 display: none;
}
</code></pre>
このCSSを適用したTwitterのスクリーンショットを見てみましょう。
<img src="https://blog-assets.kubosho.com/twitter_home_after.png" alt="CSSを調整した後のTwitterは2カラム表示になっている。右サイドバーは非表示になっている">
見事にTwitterの右サイドバーを非表示にできています。今回の目的を達成しました。
<h2>まとめ</h2>
正直Twitterを見ないようにしたりアカウントを削除して何もかも見れなくしたりしたほうが手っ取り早いです。
しかし他サービスのログインに使っていたり、DMでやり取りしている人がいたり、拡散される役目をTwitterに依存しがちだったり、いろいろやめられない状況でした。なので今回は妥協案として右サイドバーを非表示にしました。
Twitter Blueにトレンドなどを削除する機能を作ってほしいですが、広告枠の扱いなども考えると難しそうです。

学ぶ、考える、書き出す。

タグ「Twitter」の記事一覧