AI 時代における画像の代替テキスト

AI の進化は目覚ましく、たとえば画像を (人間が目で見る代わりに) 解析し、その内容をテキストで出力する、といったこともできるようになりました。ウェブコンテンツの中に配置されている画像も解析可能であり、自動的に、言わば画像の代替テキストが生成できるようになっています。

AI によるウェブコンテンツの画像解析 (Be My AI を例に)

実際のウェブコンテンツの画像解析 (代替テキストの生成) を、Be My AI を例に見てみましょう。Be My AI とは、Be My Eyes という視覚障害者支援サービスにおける AI 機能です。もともと Be My Eyes では、ボランティアの人が視覚障害者をサポートしていますが、Be My AI 機能を使うことで、人間のボランティアの代わりに AI (GPT-4) によるサポートが受けられる、というものです。

ここでは、iOS の Be My Eyes アプリを用いてみます。無料で手軽に利用できるので、ご興味あればぜひご自身でもお試しいただければと思います。あらかじめ Be My Eyes アプリを iPhone にインストールして、Be My Eyes にログインしておきます。

VoiceOver が起動した状態で、ブラウザ (Safari) でウェブページを開き、読み上げのフォーカスを画像に当てます。Be My AI で解析したい場合は、その画像をトリプルタップしてメニューを開き、「共有」→「ビーマイアイズで解析する」を選択します。(VoiceOver を併用しない場合は、Safari の画面上で当該画像を長押しすることでメニューを開き、「共有」→「ビーマイアイズで解析する」を選択することができます。)

iOS Safari で Be My AI による画像解析を起動する手順。この例ではパリ 2024 パラリンピック公式サイトの「会場」ページで、VoiceOver の読み上げのフォーカスを「エッフェル塔スタジアム」の画像に当てて、「共有」メニューの「ビーマイアイズで解析する」を選択している。
iPhone Safari で Be My AI による画像解析を起動する手順。画像にフォーカスを当てて、「共有」メニューの「ビーマイアイズで解析する」を選択する。

すると Be My AI によって画像が解析され、画像の内容がテキストで出力されます。さらにユーザーの任意で、対話型のやりとりを通じて、画像の詳細を深掘りすることができます。

Be My AI によって画像の内容がテキストで出力される (左)。ユーザーが追加の質問を入力すると、その質問に対する回答が得られる (右)。
Be My AI によって画像が解析され、次のようにテキストが出力される。「この写真は、パリ 2024 パラリンピックのために設置されたエッフェル塔スタジアムを示しています。スタジアムはエッフェル塔のすぐ前に位置しており、観客席は紫色の装飾が施されています。スタジアムは満員で、多くの観客が試合を観戦しています。中央にはサッカー場があり、選手たちがプレーしています。背景には青空が広がり、エッフェル塔がそびえ立っています。」 これに対して追加の質問で「ブラインドサッカー専用のスタジアムですか?」と入力すると、次の回答が得られる。「はい、このスタジアムはブラインドサッカー専用のスタジアムです。ブラインドサッカーは視覚障害者のためのサッカーで、選手たちは音を頼りにプレーします。スタジアムのデザインや設備も、視覚障害者が安全かつ快適にプレーできるように工夫されています。」

画像の代替テキストはどうあるべきか?

Be My AI を例に AI による画像解析を試してみましたが、どのような印象を持たれたでしょうか?あまりに手軽に、かつそれなりの品質で画像の内容をテキスト化できるので、もはやウェブコンテンツの画像 (<img> 要素) には代替テキスト (alt) を書かなくてもよいのでは、という印象をお持ちかもしれません。

ただ実際には、ユーザーが AI を用いて画像を解析するには、解析する対象の画像を特定できる必要があります。画像の代替テキスト (alt) は、そのための重要な手がかりとなります。コンテンツを制作する側としては、コンテンツの文脈の中でその画像を用いることで、どんな情報をユーザーに伝えたいのかを意識して、簡潔に代替テキストを書くことが大事です。以前、「img 要素の alt 属性の入れかた」という記事を書きましたが、この基本は AI 時代になっても変わりません。

一方で、代替テキストには AI による画像解析と同程度の文章が求められると考える方もいるかもしれませんが、必ずしもそんなことはありません。むしろ、画像の代替テキスト (alt) は簡潔なものにしておいて、それを読み取ったユーザーが自らの意思で「もっと画像の詳細を深堀りしたい」と思ったら、そのときは AI による画像解析を活用することも可能である、という建て付けで十分だと思います。

代替テキストを画像に付与する作業を効率化するために、AI が生成したテキストを alt 属性に転記する、という制作方法もあるかもしれません。ただし AI による画像解析は、ある意味純粋に画像に含まれるものを事細かに描写しようとするところがあり、文脈上、余分な情報が含まれてしまう可能性があります。AI が生成したテキストを、コンテンツの文脈に沿って推敲するひと手間は必要になるでしょう。

画像の存在を認知できないことが「情報格差」につながるかもしれない

AI による画像解析が可能になったことで、視覚障害者はより能動的に画像と向き合うことができるようになり、画像ならではのユーザー体験を、たとえ目が見えなくても享受できるようになりつつあります。ここで大事になってくるのは、視覚障害者が、ウェブコンテンツにおける画像の存在を、目が見える人と同等に認知できることです。

コンテンツ制作側で、安易に画像の代替テキストを空に (つまり alt="" に) していたりしないでしょうか? alt="" にすると、その画像 (<img>) の存在自体がスクリーンリーダーで認識されないため、視覚障害者にとっては「そこにあるはずの画像」が認知できず、AI によって画像の内容を深掘りする機会が失われてしまうのです。

たとえばコンテンツの中で、場の空気感や雰囲気を伝えるべく「イメージ」的な画像を配置することがありますが、これを (コンテンツ内容の理解に直接的には影響しないと解釈して) 装飾的な画像であると判断して alt="" にしてしまうケースなどが、時折見られます。目が見えなくても「イメージ」をつかめることで、目が見える人と同じようにコンテンツを深く豊かに体験できる可能性があること、そしてそれが今や AI によって容易にできることを考えると、alt="" という実装がこれまでになく「情報格差」を生み出してしまうかもしれないことは、意識しておきたいものです。

以前に共訳した「インクルーシブデザインの原則」(執筆者 : Henny Swan、Ian Pouncey、Heydon Pickering、Léonie Watson) を改めて見ると、「同等の体験を提供する」「利用者に制御させる」という原則が掲げられています。alt="" という実装はアクセシビリティ検証ツールではエラーになりませんが、インクルーシブなユーザー体験という観点も考慮に入れて「本当にこの画像は alt="" でよいのか?」は丁寧に検討したいところです。AI 時代になって画像の代替テキスト (alt) は要らなくなるどころか、むしろこれまで以上に、適切に記述することが求められると考えています。