商品画像の代替テキスト：写真と4コマ広告の例

商品画像の代替テキストは、買い物客がその特定の画像から必要とする情報に基づいて作成します。必要に応じて商品名やバリアント名を挙げ、意味のある視覚的詳細を記述し、画像に表示されている重要な言葉を保持します。完全な4コマ広告には、すべてを1つの混雑したalt属性に押し込むことなく、その順序が理解できるように、近くに長い説明が必要な場合もあります。

同じカップでも、カタログのサムネイル、蓋のクローズアップ、コミック広告では異なる表現が必要になることがあります。まず、ページ上での画像の役割から始め、次に、そうでなければ欠落するであろう情報を記述します。

画像の目的に応じて説明を選択する

W3Cの画像ガイダンスは、画像を情報提供、装飾、機能、複雑なものに区別しています。これは、作成者に対し、コンテキストを考慮し、有用なテキスト代替を提供し、すべての画像を同一に扱わないように求めています。以下の表は、この原則を架空のトラベルカップキャンペーンに適用したものです。

これらの例は、それらの機能が目に見えて正しく機能していることを前提としています。断熱性、漏れ防止、素材を外見から推測しないでください。光沢のある表面だけでは、製品がどの金属を使用しているかはわかりません。

キーワードリストではなく、追加情報を記述する

有用な詳細説明は、「2本のパッド入りショルダーストラップが付いたネイビーのデイパックの背面図」と記述するかもしれません。「最高のバックパック トラベルバックパック プレミアムバックパック」のような文字列は、写真について説明していません。前面図と背面図のどちらかを選択するのに役立つような文章を作成してください。

適切な繰り返し量は、周囲のテキストによって異なります。リンクされたサムネイルと商品タイトルが1つのリンクを形成している場合、タイトルを再度繰り返す前に、結合されたアクセシブルネームを検査してください。カラースウォッチがバリアントを選択する唯一の方法である場合、コントロールがその色と選択された状態を伝えていることを確認してください。画像属性だけがインターフェース全体ではありません。

画像が何についてのものであるかを特定できる場合は、商品名を使用してください。この画像を次の画像と区別する特定の詳細を追加してください。意味が変わらない限り、すべての背景オブジェクトを説明する必要はありません。

4コマ広告に短い入り口と完全な説明を与える

コミック形式の広告には、パネル間の関係が含まれます。APLNのコミック画像説明ガイドは、機械的にオブジェクトをリストするのではなく、順序と相互作用を伝えることについて議論しています。広告の場合、それはそのオファーを伝える言葉を保持することも意味します。

この架空のクリエイティブを考えてみましょう。通勤者がデスクでLoopカップを持ち、ハンドルを折りたたみ、電車に持ち込み、その後、ショッピングの招待状付きの商品クローズアップを見るというものです。その唯一の商品主張は折りたたみ式ハンドルです。これは編集例であり、生成された結果やテストされたキャンペーンではありません。

表の短い代替テキストを入り口として使用してください。以下の長い説明を画像の横、または明確に名前が付けられたアクセシブルな説明コントロールの背後に配置してください。

4つのパネル。上段を左から右へ、次に下段を読みます。
デスクで、通勤者が砂色のLoopカップに手を伸ばしています。言葉は「デスクから出発まで」。
クローズアップでは、ハンドルが蓋に折りたたまれている様子が示されています。言葉は「平らに折りたためるハンドル」。
電車の中で、通勤者がハンドルを上げた状態でカップを持っています。追加のコピーはありません。
最後のパネルにはカップだけが示されています。言葉は「Loop」と「カップを探る」。

説明を最終画像に合わせてください。修正によって電車のシーンがキッチンに変わった場合、説明も変更する必要があります。画像がもはや従わない以前のブリーフを説明しないでください。

重要な広告コピーをテキストとして利用可能にする

簡潔な見出しとショッピングの招待状は、それが理解しやすいままであれば、短い代替テキストに直接含めることができます。長い対話や複数のキャプションがあるシーケンスは、完全な隣接する説明で処理する方が良いでしょう。任意の文字数に達するためだけに、価格条件や資格を削除することは避けてください。

これは、広告を個別のテキストレイヤーとして再構築することを要求するものではありません。完全な画像は、統合されたタイポグラフィを保持できます。テキスト代替は、それを公開するページまたはプラットフォームに属し、画像自体を使用できない人々にサービスを提供します。

公開プラットフォームが限られた説明フィールドしか提供しない場合、利用可能なフィールドを慎重に使用し、残りの重要な情報を投稿キャプションまたは付随するページに配置してください。あるプラットフォームのコントロールがどこにでもあると仮定するのではなく、実際の目的地を確認してください。

クリエイティブの後に説明を完成させる

Panelly Studioで完全な広告を作成し、洗練させた後、最終バージョンから代替テキストを作成します。画像ファイルとその説明を配信ノートにまとめておきます。`loop-commute-v2.png`と「Loop commute v2 description」のようなシンプルなペアは、後の更新を追跡しやすくします。

画像が利用できない状態で、可能であれば支援技術を使用してページをレビューしてください。誰かが製品を特定し、シーケンスを理解し、同じ目的地に到達できますか？これはキーワードを数えるよりも有用なレビューです。

FAQ

理想的な代替テキストの長さはありますか？

すべての画像と公開コンテキストに合う単一の長さはありません。短い代替テキストは焦点を絞り、簡潔なフレーズでは伝えきれない情報が画像に含まれる場合は、より長い代替テキストを提供してください。

すべての商品サムネイルで商品名を繰り返すべきですか？

まず、周囲のリンクとテキストを確認してください。目標は、理解しやすい統合された体験です。詳細写真は、商品グリッドのサムネイルとは異なる情報を必要とすることがよくあります。

AIは説明を作成できますか？

下書き作成に役立ちますが、結果を実際の画像とページコンテキストと比較してください。公開する前に、でっち上げられた機能、欠落したコピー、誤った読み取り順序を修正してください。

説明を目に見える画像に合わせる

以下の架空のATELIERボトルは、当社の記録された改訂演習から実際に生成された編集画像です。これは単一の製品シーンであり、4コマ広告や実際の顧客の製品ではありません。

この画像に対する簡潔な代替テキストは、「黒いキャップとアイボリーのラベルが付いた琥珀色のATELIER香水ボトルが、白い背景のベージュの石の台座の上に立っています。」です。これは、香りのノート、成分、性能の主張をでっち上げることなく、目に見えるボトルと設定を特定します。

画像が改訂チュートリアル内に表示される場合、周囲のキャプションには、花、鏡、布地が削除されたが、元の暖かい壁と台座の形状が変わったことも記述すべきです。その比較はチュートリアルのコンテキストに属し、すべての製品サムネイルの代替テキストで繰り返す必要はありません。

以前のLoopカップのシーケンスは、記述例にすぎません。この香水画像にその4コマ説明を添付しないでください。短い代替テキストで十分か、または別のシーケンス説明が必要かを判断するために、最終的に目に見えるアセットを使用してください。

情報源と参考文献

• W3C画像ガイダンス
• APLNコミック画像説明ガイド