メインコンテンツへ移動
Boletolibre

イベントメールの画像代替テキスト:作成と確認のガイド

イベントのメールにはポスター、登壇者の写真、協賛者のロゴ、画像のボタンなどが使われます。スクリーンリーダーを使う人、画像をブロックする人、表示方法の異なるメールアプリを使う人には画像が見えない場合があります。代替テキストは画像の役割を伝えますが、画像の中にしかない重要な開催情報を補うものではありません。本文、画像、リンク先を一緒に確認します。

Boletolibre編集部

公開日

画像の枠、読める本文の行、リンクの行動を持つメールカードを二つの表示状態で示した図。
画像がある状態とない状態で確認し、開催情報と次の行動が分かるようにします。

画像より先にメール本文を確認する

画像をすべて隠してメールを読みます。イベント名、メールが届いた理由、現在の日時と会場、次に取る行動が分かるでしょうか。分からなければ、まず本文とリンクを直します。代替テキストは特定の画像の代わりであり、メール全体の別版ではありません。同じ写真でも、開催予告と登壇者発表では必要な説明が変わります。[1]

書く前に近くの見出しやキャプションを確認します。同じ内容がすでに書かれていれば、繰り返しは負担になります。画像の役割を一文で記し、画像がなければ何が失われるか考えます。W3Cの指針も、文脈での役割に応じて代替を決めています。

画像ごとの役割を決める

画像を役割で分けます。情報を伝える画像は、近くの本文にない事実や識別情報を補います。機能を持つ画像は、それ自体がリンクや操作部品です。装飾画像は雰囲気や配置を作るだけで、必要情報を持ちません。地図やプログラム表のような複雑な画像には、短い説明に加えて、本文または更新されるリンク先に同等の情報が必要になることがあります。[1][3]

写真に写るものをすべて列挙する必要はありません。イベント名が直後にある舞台写真は装飾かもしれませんが、新たに発表する登壇者の顔写真は情報を持ちます。ファイル名ではなく、このメールでの用途から判断します。画像が事実を示唆する場合は、承認済みプログラムを知る担当者に確認します。

参加者の判断に役立つ文を書く

情報画像では、読者の次の判断に必要なことを伝えます。氏名と役割が本文にあるなら「演台に立つ登壇者アナ・シルバ」で十分かもしれません。会場入口の写真が特定の導線を示すなら、会場に確認してからその特徴を説明します。協賛ロゴは、識別が重要なときに承認された組織名を使います。[1]

  • ポスター:日時と会場は本文に置き、残る情報にだけ短い代替文を付ける。
  • 顔写真:画像の役割が人物紹介や略歴へのリンクなら、それを示す。
  • ロゴ:識別が必要なら承認された協賛者名を使い、それ以外は装飾か検討する。
  • 画像ボタン:行動と行き先を示し、リンクを確認する。

媒体自体が重要でなければ「~の画像」と始める必要はありません。氏名、代名詞、日時、経路、収容人数を推測しないでください。ポスターの全文を長いalt属性に詰め込むのも避けます。重要事項は選択できる本文に移し、画像には残る役割に合った短い代替文を付けます。

重要事項は通常のテキストに置く

関連する場合、日時とタイムゾーン、会場またはオンライン参加方法、チケットの選択肢、価格条件、参加に影響する変更は通常のメール本文に置きます。ポスター画像は視覚的な補助になりますが、画像が表示されない場合があり、長い代替文は読み進めにくくなります。図のプログラムには短い名前を付け、読める予定表を本文か明確に示した最新のリンク先に用意します。[3]

編集者が参照できる承認済みの開催情報を一か所にまとめます。送信前に、表示される本文、代替文、リンク先をその情報と照合します。計画が変われば三つとも更新します。訂正やアクセス案内を代替テキストだけに載せてはいけません。

翻訳と事実確認を行う

各言語版の読者に合わせて代替文を翻訳します。イベント、会場、登壇者、協賛者の正式名称は承認された表記を守り、行動や説明は自然に訳します。方向の案内や固有名詞の機械翻訳は必ず確認します。同じ目的を明確に伝えるために、言語によって語順が変わることもあります。

各言語で、代替文を翻訳済みの見出し、ボタン、リンク先と比べます。代替文が「登録する」なのにリンク先がキャンセル待ちだけなら、行動の説明が誤解を招きます。画像に文字が埋め込まれている場合は、画像を差し替えるか本文にもその文字を載せるか決めます。

実際に届くメールで試す

使用する配信サービスから実際のテストメールを送り、チームで確認できるメールアプリで開きます。画像をブロックし、利用可能ならスクリーンリーダーやアクセシビリティツリーで読み、画像リンクを開きます。アプリによって代替文の一部しか表示しなかったり、画像の配置によって表示しなかったりします。共通の文字数上限やプレビューだけに頼らないでください。Mailchimpも自社のキャンペーンでこの差を説明しています。[4]

狭い画面、転送、引用が一般的ならそれらでも確認します。空の代替文が読まれず、リンク画像の行動が分かり、開催情報が読めることを確かめます。テストしたアプリと結果を記録し、一回のテストですべての受信箱を保証したとは言わないようにします。

画像別の確認表を使う

画像と言語ごとに一行を使います。画像の識別子、役割、近くの本文、承認された事実の出典、リンク先、代替文案、確認者の判断を記録します。画像を隠した結果と未解決の問題を直す担当者も書きます。制作終盤で画像が変わっても編集上の判断を追えます。

編集可能な確認表には記入例と、送信を止める未解決事項の欄があります。キャンペーン用にコピーしてください。テンプレートは英語ですが、この記事は六言語で読めます。この内容確認表に購読者情報や個人情報を入れないでください。

画像代替テキスト確認表をダウンロード(Markdown、英語)

出典と参考資料

  1. 画像のチュートリアルW3C WAI · 確認日
  2. 装飾的な画像W3C WAI · 確認日
  3. 達成基準1.1.1「非テキストコンテンツ」の解説W3C WAI · 確認日
  4. 画像に代替テキストを追加するMailchimp · 確認日