本文へ移動
easeweb
ご相談
トピックを検索

写真の要点を外したり読み違えたりするAI生成の代替テキスト

ショップのメディアライブラリーがアップロードのたびにAIの説明を代替テキストへ書き込み、誰も読まないまま公開されるため、4色で売っている手帳が3色だと読み上げられてしまう

WCAG 2.2
SC 1.1.1A
必須とする規格
Section 508 · EN 301 549(EU) · JIS X 8341-3
問題あり photo.alt = await describeImage(photo.url);
アクセシビリティの問題を示した図: 全盲:何色から選べるの?
01

問題

スクリーンリーダー利用者には、AIが商品写真から推測した文が読み上げられるため、写真で伝えたいことが届かないか、事実と違う内容を聞かされてしまう

02

試してみる

手帳の写真をアップロードして、代替テキストに何が入るか見てみましょう

エディターの下の欄に、AIが各写真の代替テキストに書き込んだ内容が出ます。エディターの中で、それを読んだり直したりできますか?次に修正を適用し、写真と見比べて説明を直してから、チェックを入れてください。

問題あり 修正できますか?

問題アップロード時にAIの説明を代替テキストへ書き込む

週間手帳 2027(A5)

写真

各写真の代替テキスト(商品ページでスクリーンリーダーが読む内容):

(写真をアップロードしてください)

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

AIの説明は、公開する前に人が確かめる

修正前
問題アップロード時にAIの説明を代替テキストへ書き込む
// メディアライブラリーに写真がアップロードされたときmedia.on('upload', async (photo) => {  photo.alt = await describeImage(photo.url);  await photo.save();}); // 編集画面の「公開」ボタンが押されたときapp.post('/products/:id/publish', async (req, res) => {  const product = await products.get(req.params.id);  await product.publish();  res.redirect(product.url);});
問題点4点
  • アップロードの処理がサービスの返した文をそのまま代替テキストに書き込むため、商品を公開した時点で説明も公開される。
  • 編集画面は写真を表示するだけで説明は表示しないため、「公開」を押す前に誰も読まない。
  • 表紙と中のページの写真は写っているものだけで説明され、年号も、ページの作りも、メモ欄も伝わらない。
  • 色の写真は説明が間違っている。4冊ではなく3冊、テラコッタではなくピンクと言っている。
修正後
修正人が確認してから公開するAIの下書き
// メディアライブラリーに写真がアップロードされたときmedia.on('upload', async (photo) => {  // 人が確認するための下書き。確認されるまで、写真に代替テキストはない  photo.altDraft = await describeImage(photo.url);  photo.alt = null;  await photo.save();}); // 編集画面の「公開」ボタンが押されたときapp.post('/products/:id/publish', async (req, res) => {  const product = await products.get(req.params.id);  for (const photo of product.photos) {    if (!req.body[`checked-${photo.id}`]) return res.sendStatus(422);    photo.alt = req.body[`alt-${photo.id}`].trim();    await photo.save();  }  await product.publish();  res.redirect(product.url);});
修正の手順5ステップ
  1. サービスが返した文は専用の欄に下書きとして保存し、代替テキストはまだ設定しない。AIが書いた文が、そのままページに出ることはなくなる。
  2. 編集画面で、各下書きを写真の隣のテキスト欄に表示し、説明が答えるべき問いを欄のラベルにする。
  3. 欄に短いヒントを結び付け、AIの下書きなので写真と見比べる必要があることを伝える。
  4. 写真ごとに、必須のチェックボックスを加える。すべての写真を確認するまでブラウザーはフォームを送らず、サーバーも確認のない公開を受け付けない。
  5. 「公開」のときに、人が確認した文か書き直した文を代替テキストにする。空のまま確認した欄は alt="" になり、何も加えない写真に使える。

これで修正前の例は直り、確認する人が写真を見られて商品を知っている限り、1.1.1を満たします。下書きは入力の手間を省いてくれますが、テキストの代替と言えるのは、写真がそのページにある理由を知っている人が読んでからです。

04

修正の確認

4項目、マウス不要

確認方法: スクリーンリーダー

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。画像説明サービスやその設定、写真を加える方法を変更した際は、再度確認します。

スクリーンリーダーでの aria-describedbyの読まれ方

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。describeImage、media、products は、実際のサービスに置き換えてください。このガイドは、生成された説明が読まれないまま公開される場合を扱います。代替テキストがない画像や、ファイル名が入った画像は代替テキストがない、情報を伝える画像で、説明を一度も尋ねないアップロードは代替テキストを尋ねない画像のアップロードで扱います。グラフや図表は1文の代替テキストでは足りず、別のトピックで扱います。Microsoft Edgeのように、代替テキストのない画像をブラウザー自身が説明する機能は、利用者側の道具であって、ページのテキストの代替ではありません。代替テキストのない画像が、それで合格になることはありません。このページで実際に買い物をする人と一緒に確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

EaseWebのサービス

修正した問題を、次のリリースで再発させない

このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。

サービス内容を見る