ファミリーマートの公式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)を考える

いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています（アクセシビリティタスクフォースについては <a href="https://www.concentinc.jp/works/abematv_202101/">AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 ｜ 事例紹介 ｜ 株式会社コンセント</a> で少し触れられています）。
現在、アクセシビリティ向上の文化やプロセスを社内に浸透させていくため、さまざまな施策を考え実行しています。
ただそうやって活動していくうちに、ふと気づいたことがありました。自分はなぜアクセシビリティ向上に力を込めているかという言語化をしていないことです。
アクセシビリティ向上の推進は、個人でやるには大変で、組織としてやっていくのが一番良いと思っています。
ただ、組織としてアクセシビリティ向上をやっていくように伝えていく中で、個人の思いというのは活動の原動力として大事だと思っています。ここをあやふやにしてしまうと、ふとしたときにくじけてしまい折れてしまう気がします。
自分がそうやってくじけて折れてしまわぬよう、ここで自分のアクセシビリティ向上に対する思いを言語化してみます。
<h2>元々の自分の考え</h2>
自分は元々「かけがえのないモノをつくる」というビジョンを持っています。
「かけがえのないモノ」の定義は自分の中でも完全に定まってはいないですが、現時点だと「社会インフラになるもの」を作りたいという考えです。
また高校生のときから HTML と CSS を書いてきた経験もあり「インターネットを基礎とした社会インフラをつくる」ことを自分の理想として掲げています。
その「インターネットを基礎とした社会インフラ」の中で、自分の基盤が HTML と CSS というのもあって、Web フロントエンドで貢献したいという考えを持っていました。
<h2>聴覚障害者からのサービスに対するツッコミ</h2>
さてここで、2 年前の <a href="https://japan-a11y-conf.com/vol2/">Japan Accessibility Conference digital information vol.2</a> (以下、JA11YC) での体験を話します。
<a href="https://abema.tv/video/title/89-66">ABEMA Prime</a> という番組内で、かつて <a href="https://abema.tv/channels/abema-news/slots/CTEDYRdBBoo76w">補聴器ユーザーの苦悩と葛藤</a> (リンク先では期限切れで動画視聴できず)というテーマを取り上げたことがありました。
この番組を放送したあと、聴覚障害者の方から「字幕をつけないのはなぜか。聴覚障害者を排除することに自覚がないのか、自覚があってもやるべきことをしていないのはなぜか（要約）」といった意見をもらいました。
そしてこの意見を書いた人が、JA11YC の場にいてそこで話をしました。
話した内容自体は 2 年前ということもあり忘れてしまっています（これに関しては申し訳ないです）。
ただ、ここで自分は「サービスを楽しめない人を出してしまうなんて自分で自分が恥ずかしい」という気持ちになり、サービスのアクセシビリティ向上をやっていくという思いを強くしました。
<h2>視覚障害者を誘導する体験</h2>
そして JA11YC に参加した帰りに、視覚障害者の人を渋谷駅まで誘導する機会がありました。どういう流れで誘導することになったか詳細は思い出せないですが、自分から手を挙げた気がします。
ただ誘導するのは初めてということもあり、果たしてちゃんと誘導できるのか少し緊張しました。
渋谷の道玄坂のほうは点字ブロックがほとんどありませんでした。そのため、点字ブロックに沿って歩けず、ほぼ自分に頼って歩かないといけない状況でした。なので自分は口頭でいまどの辺りにいるかを、場所の名前や道路の形状なども交えつつ案内しました。
結果的にはなんとか渋谷駅まで誘導することができて、電車に乗ったところまで確認しました。
誘導し終えたあとは、正直いつもは感じない疲れを感じましたが、「視覚障害者を誘導して気づいた点」で後述するように自分の中では良い経験でした。
なお道中で前から来た人がすれ違おうとしたときに、あまり避けずに軽く肩を当てた後こちらが悪いかのように軽い舌打ちをしたときは、イラッとしました。
相手側ももしかしたらイライラしていたとかで気持ちが良くなかったのかもしれないですが、それでもそれを自分に向けないでほしいという気持ちでした。
<h3>視覚障害者を誘導して気づいた点</h3>
この経験は自分があまり意識してこなかった点に気付かされたという意味で、良い経験でした。気づいたことを挙げると次の通りです。
<ul>
<li>渋谷駅周辺に点字ブロックがない箇所が多い。駅内は割とあるが、路上には無いほうが多い</li>
<li>渋谷駅周辺の道路は人の多さに対して歩道が狭かったり分かれ道があったりで、視覚障害者に限らず自分も歩きづらい
<ul>
<li>ハロウィンみたいなイベントがあったときなんかはもう……</li>
</ul>
</li>
<li>ざわざわしているところを歩くのは、歩くのに必要な手がかりが聞きづらくなるという意味で大変そう</li>
<li>歩いているときに前から来た人が避けてくれるとは限らないのが、大変そう</li>
<li>前述のカンファレンスに参加するために行きはタクシーで来たということで、タクシー代がかかる場面が多そう</li>
</ul>
自分が気づいていなかっただけで、不自由な部分は多く転がっているのを感じました。この経験が元となり、せめて自分が関わるところはアクセスしやすくしたいと考えるようになりました。
<h2>なぜ、いまの会社・サービスでアクセシビリティ向上をやるのか？</h2>
自分の考えとしてはこれまで書いた通りですが、ではなぜ、いまの会社・サービスでアクセシビリティ向上を推進するタスクフォースを作ってまでアクセシビリティ向上を推進しているのでしょうか？
その理由としては、最近<a href="https://www.cyberagent.co.jp/corporate/purpose/">会社でパーパスが発表された</a>ことにあります。
パーパスは存在意義を示すものです。発表されたパーパスは「新しい力とインターネットで日本の閉塞感を打破する」という内容で、アクション的な項目の中に「新しい未来のテレビ ABEMA を、いつでもどこでも繋がる社会インフラに」があります。
そうです、会社として ABEMA を社会インフラにすることを明言しています。これによって、自分のビジョンと会社の向いている方向が合致していると感じるようになりました。また、アクセシビリティタスクフォースを立ち上げたときに「いつでもどこでも繋がる」というのは考えていて、それが会社としても明言されるようになり嬉しくなりました。
これらを踏まえて、いまの会社・サービスでアクセシビリティ向上を推進していき、やがては担当サービス外にも影響を及ぼせる様になりたいと思いました。
<h2>アクセシビリティ向上を推進する上で気をつけていること</h2>
<a href="https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei?slide=11">Webエンジニアとして いま知っておきたい Webアクセシビリティ</a>というスライドにも書かれているように、特定の個性・状況・環境だけを考えて倫理観に訴えるのではなく、自分も含めたみんながもっと便利に使えて、結果ユーザーが増えていくようなベストな方法を考えていくことを意識しています。
アクセシビリティ "対応" と書くと後ろ向きな感じになりがちなのと、特定のユーザー向けに特別対応をすると捉えがちというのもあるので、前向きにやれるようにアクセシビリティ "向上" を一貫して使うのも気をつけている点です。
また自分たちだけでアクセシビリティ向上をやれるところからやっています。例を出すと WCAG の達成基準を満たしているかチェックしたり、アプリを VoiceOver や TalkBack を有効にした状態で触ってみたりなどといったことはやってきました。
ただ自分たちだけでは留まらない領域もあります。例を出すと字幕対応などが最たる例でしょう。
そういった部分では自分たち以外の社内の人ともっと対話して、お互いにとってベストな物を出していきたいと考えています。
なお、いまも自分たちだけで話を閉じているわけではなく、Slack のチャンネルでアクセシビリティについて話したり考えたりするチャンネルはあり、そこである機能のアクセシビリティをより良くするための相談などがされます。
しかし相談されるなどといった受動的なコミュニケーションだけでなく、能動的なコミュニケーションをより取っていこうと考えています。

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

タグ「アクセシビリティ」の記事一覧