0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

とにかく、私は画像になにが書かれてるか知りたいのです!

0
Last updated at Posted at 2025-12-05

みなさまこんにちは。この記事は
アクセシビリティ Advent Calendar 2025
の六日目の記事です。どうぞよろしくお願い致します。

いえ単純な話でして

犬の写真

間違ってはいないんですよ。「小型犬の写真」とか「シーズーの写真」とか「公園でのシーズーの写真」とか。全部正解。

でも…、情報を伝える側に情報の受け手がなにを知りたがっているかを判断することはできないし、情報を伝える側が取捨選択することはそもそも情報保障をしているalt属性のあり方としてどうなの?とか思わなくもないわけです。

いや、もっと単純な話で、「で、どんな犬なの?」とか「季節はいつなの?」とか「どんな雰囲気なの?」とか思うわけです。

画像に対する4つのアプローチ

ここ最近のLLMの進化などによって、スクリーンリーダーユーザーが画像にアプローチするときの方法が少しずつ変化してきました。この記事ではそんな変化について書いていきます。altテキストをどの用に書けば良いのかを悩んでモジモジしてしまう方の参考になれば幸いです。

altテキストによって内用を理解する

スクリーンリーダーはimg要素に設定されたalt属性のテキスト、title属性のテキスト、onmouseoverのツールチップなど、多種のテキストから情報を取り込みます。ユーザはそれら情報提供者側から与えられた情報によって、画像を理解します。

ブラウザが自動生成する代替テキスト

5年くらい前から、ChromeやEdgeが画像の代替テキストを自動生成するようになりました。スクリーンリーダーユーザーにとっては、思った以上にウェブの情報が変化したことでしょう。これによって画像の内用を理解することもあります。ただ、altテキストが入っていれば自動生成はされないようです。

人に送って見てもらう

多くの画像は右クリックすることでダウンロードできます。ページ全体は見せたくないが画像はどうにか理解したいという場合には、画像をダウンロードして、信頼できる人に送信して情報を得ることもあります。

LLMに解析させる

特にスマートフォンではこれをやっているユーザーは多いと思います。Androidに搭載されているTalkBackでは、3本指でシングルタップして出てくるメニューに、画像の説明を取得する項目があります。PC用のスクリーンリーダーにも画像にスクリーンリーダーの読み上げフォーカスを置いて、その画像をLLMに解析させる機能が搭載されているものがあります。これがおそらく最も詳しい(あるいは冗長な)説明になるでしょう。

えっ?やっぱりaltテキストはどう書くのが正解なの?

IMG_0007.JPG

ブログの記事に貼るための画像だったら?イベント紹介のための画像だったら?悩みますよね。でも大丈夫です。「花見の写真」でもいいんです。それ以上知りたくなったユーザーは、スクリーンリーダーに聞いてみたりすることができますから。

ただ、altテキストが空文字列だった場合、スクリーンリーダーは画像の存在を無視します。つまり、まったくアプローチできなくなってしまいます。意図的に無視させたいのならば空白にする必要がありますが、どう書いてよいかわからないような場合には、そもそもalt属性を書かないほうが良いのではないかと筆者は思っています。

Geminiに画像を送って解析!

ということで、Geminiに画像を送って、その内用を表示するというChrome拡張を書いてみました。先程の画像を解析したものは以下のようになります。

Gemini AI 解析結果
この画像は、満開の桜の下で**お花見(ピクニック)を楽しんでいるグループ**の様子を写したものです。春の穏やかで楽しい雰囲気が伝わってきます。

以下に詳しく説明します。

### 1. 全体的な状況
*   **場所と季節:** 公園のような場所で、頭上には満開の桜(ソメイヨシノと思われます)が咲き誇っています。地面には土や草が見え、木陰になっています。
*   **中心の人物:** 大人5人と、赤ちゃん1人のグループがレジャーシート(または新聞紙)の上に座り、車座になって食事をしています。

### 2. 人物の詳細(左から右へ)
皆、手に**「焼き芋」**のような茶色い皮で中が黄色い食べ物を持っており、それを楽しそうに食べています。

*   **左端の男性:** 眼鏡をかけ、白いジャンパーとジーンズを着用しています。あぐらをかき、大きな焼き芋を両手で持って微笑んでいます。
*   **その奥の男性:** 眼鏡をかけ、白いシャツを着ています。横を向いて隣の女性と話しているようです。
*   **中央左の女性:** 黒っぽい服を着たロングヘアの女性です。焼き芋を口元に運び、楽しそうに食べています。
*   **中央右の女性:** 水色のシャツを着ています。膝の上に**赤ちゃん**(ボーダー柄のズボン着用)を抱っこしながら、片手で焼き芋を持ってポーズをとっています。
*   **右端の男性:** 眼鏡をかけ、グレーのシャツを着ています。カメラに向かって口を大きく開け、手にした食べ物を差し出すような、おどけたポーズをとっています。

### 3. 周囲の物と背景
*   **足元:** 新聞紙や白いシートが敷かれています。黒いリュックサック、ペットボトル(お茶やジュース)、缶(ビールなど)、白いレジ袋などが散乱しており、宴会の最中であることがわかります。
*   **背景:** 後ろの方には、他の花見客や通行人が見えます。ベンチに座っている人、散歩している人、自転車、ベビーカーなどが確認でき、賑わっている公園の様子です。

### 4. 文字の抽出
画像内の文字は解像度や角度の関係で読み取りにくいものが多いですが、確認できる範囲で抽出します。

*   **中央の黒いバッグ/袋:** 白い文字で大きく **「3」** と **「9」** が見えます(おそらく「39」という数字のデザイン)。
*   **足元の飲料:**
    *   黄色いペットボトル:「午後の紅茶」のようなデザインに見えますが、文字は判読不能です。
    *   白い缶:ビールや発泡酒の缶に見えますが、銘柄までは読み取れません。
    *   新聞紙/チラシ:文字が細かすぎて判読できません。

全体として、仲の良い友人や家族が集まって、桜を見ながら焼き芋などを食べてくつろいでいる、非常に微笑ましい日常の一コマです。

最後に

まず、画像が存在することを伝えてください。どう書いてよいかわからなくなったら「画像」でもかまいません。空文字列は「無視しても構わないことが明確な場合」にだけ使用してください。そのうえで、何の画像なのかを目的に応じた簡潔な文章で伝えてみてください。それ以上知りたくなったら、スクリーンリーダーユーザーはなんとかする手段を持ち始めています。それでもaltテキストはとても重要なじょうほうなのです。

スクリーンリーダーユーザーに向けてのTIPS

JAWSのスマートピクチャ

JAWSには、画像をLLMに送信して解析させる機能があります。今回の例では、以下のように操作します。

  1. 仮想カーソルを画像の上に置きます。IMG_0007とか書かれているところですね。
  2. JAWSKey+Space P C と順番にキーを押します。解析が始まります。
  3. 解析が終わったら内用が表示されたウィンドー(JAWS的には仮想バッファ)が現れます。内用を確認して、追加の質問があれば質問することができます。

NVDAについて

筆者はNVDAで同様の機能があるかを確認していませんが、同じようなアドオンは書けるはずです。情報をお持ちの方教えて下さい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?