メインコンテンツにスキップ
すべてのコレクションベストプラクティス
画像に代替テキストを追加する: ベストプラクティス
画像に代替テキストを追加する: ベストプラクティス
Emily van der Harten avatar
対応者:Emily van der Harten
一週間前以上前にアップデートされました

この記事は、機械翻訳を使用して英語から翻訳されました。

スクリーン リーダーなどの支援技術では、視覚に障がいのある人や弱視の人向けに画像を説明するために、代替テキストとも呼ばれる alt テキストを使用します。また、インターネットの帯域幅が低いために画像が適切に読み込まれない場合や、認知負荷を軽減するために Web サイトで画像を非表示にしている場合にも、alt テキストが画像の代わりに表示されます。

Webex Events、プラットフォーム全体の画像に代替テキストを追加できるため、誰もがすべてのイベント体験に公平に参加できます。この記事では、画像に代替テキストを追加する方法を示し、効果的な代替テキストを書くためのヒントとリソースを提供します。

画像に代替テキストを追加する理由は何ですか?

効果的な代替テキストを書くことは、習得する価値のあるスキルです。しかし、練習すれば完璧になりますし、何もしないよりは試してみるほうがはるかに良いです。すべての画像に代替テキストを追加するか、適切な場所に画像を装飾用としてマークすることを強くお勧めします。何もしなければ、さまざまなユーザーがコンテンツにアクセスできなくなります。同様に、スクリーン リーダーは代わりに画像ファイル名を読み上げますが、これはユーザーにとってイライラさせられる不快な体験につながる可能性があります。

代替テキストのヒント

Webex Eventsプラットフォームで代替テキストを追加する方法を説明する前に、このセクションでは、いくつかの異なる種類の画像を紹介し、代替テキストの記述に関するヒントを概説し、さらに学習するのに役立つ Web Accessibility Initiative (WAI) のリソースを紹介します。

画像の種類

画像にはさまざまな種類があり、それぞれに異なる種類の代替テキストが必要です。以下は、プラットフォームのさまざまな部分に追加できる一般的な画像の種類です。

  • 情報画像- ページで伝えられている概念を理解するのに役立つ情報を含む画像。画像が見えなければ、重要な情報を見逃してしまいます。これらの画像には代替テキストが必要です。

  • 装飾画像- 背景画像のように、ページで伝えられる内容にそれ以上の情報を追加しない画像。これらの画像は装飾としてマークできます。

  • 機能的な画像- 他のリンク先にもリンクする画像。これらの画像には、リンクの目的を含む代替テキストが必要です。たとえば、スポンサー機能に内部リンクするバナー画像がある場合は、その情報を代替テキストに含めて、ユーザーが何を期待できるかわかるようにします。

  • テキスト画像- 情報テキストを含む画像。このような画像で伝えられるメッセージには、通常 alt テキストに記述される同等のテキストが必要です。

代替テキストの書き方のヒント

  • 代替テキストは簡潔にしてください。1 ~ 2 文以内にすることをお勧めします。また、 Webex Eventsプラットフォームでは代替テキストが 250 文字までに制限されています。

  • 画像を周囲の状況と照らし合わせて説明します。「この画像について、人々が知っておく必要のある重要な情報は何でしょうか?」と自問してください。目標は、画像が伝えている内容に相当するテキストを提供することです。

  • 画像にテキストが含まれている場合は、そのメッセージもテキスト形式で、代替テキスト フィールドまたは隣接する説明のいずれかに存在している必要があります。たとえば、セッションに関する情報を含むバナー画像があるとします。スクリーン リーダーは画像に埋め込まれたテキストを読み取ることができないため、代替テキストは同等のテキストを追加するのに最適な場所です。

  • 代替テキストを「Image of」で始めないでください。スクリーン リーダーは画像を読み上げることが多いため、「Image of」と書く必要はありません。

  • 画像を装飾用としてマークすると、スクリーン リーダーはその画像を無視して読み飛ばします。次の場合は画像を装飾用としてマークします。

    • 画像には追加の情報やコンテキストは追加されません。

    • 画像は隣接するテキストで説明されており、代替テキストを追加すると重複することになります。たとえば、すぐ下のテキストに「Serena Page」という名前が記載されているプロフィール画像には、「Serena Page のプロフィール画像」という代替テキストは必要なく、装飾としてマークできます。

代替テキストリソース

WAI には、明確で役立つ代替テキストを書くのに役立つリソースが豊富にあります。

Webex Eventsで代替テキストを追加できる場所はどこですか?

Webex Eventsプラットフォームにアップロードするほぼすべての画像に、代替テキストを追加したり、画像を装飾用としてマークしたりできます。ただし、プロフィール画像は例外で、自動的に装飾用としてマークされます。😸

💡 画像に代替テキストを追加できるのは、プラットフォーム内で直接手動でアップロードする場合のみであることにご注意ください。現在、データをインポートするときに代替テキストを追加することはできません。

Event Appでは、参加者はウォール機能に投稿する画像に代替テキストを追加できます。

Webex Eventsプラットフォームで代替テキストを追加する方法

  1. Webex Eventsプラットフォームに画像をアップロードするときに、「プレビュー」手順で「代替テキストの追加」ボタンをクリックします。

    プレビュー モーダルの [代替テキストの追加] ボタン。
  2. 「代替テキストを追加」モーダルで、代替テキストフィールドに画像の簡単な説明を最大 250 文字で入力します。画像が装飾的で、情報価値を追加しない場合は、代替テキストを追加せずに、「画像は装飾的です」ボックスをオンにします。

    1. 次の例では、画像に「基調講演者 ジャネット・ワトソン。国連エネルギーの持続可能なエネルギーに関する議長」というテキストが含まれているため、このテキストをそのまま alt テキスト フィールドに追加しました。

      先ほど説明した例は、代替テキストの追加モーダル内にあります。
  3. 「保存」をクリックします。

  4. 「アップロード」をクリックして終了します。

💡 Webex Eventsプラットフォームでは、画像の代替テキストを編集することはできないことに注意してください。代替テキストを変更する必要がある場合は、画像を再度アップロードし、先ほど説明したようにアップロード プロセス中に更新された代替テキストを追加する必要があります。

参加者がウォール投稿に画像の代替テキストを追加する方法

ウォール投稿の一部として画像をアップロードする参加者は、ウォールに投稿する前に代替テキストを追加できます。

Web アプリのユーザーは、「プレビュー」手順で [代替テキストの追加]ボタンをクリックし、代替テキストを追加するか、画像を装飾としてマークして、 [保存] をクリックし、 [アップロード] をクリックします。

Web アプリの代替テキスト追加モーダル。代替テキストには次のように書かれています。

モバイル アプリ ユーザーは、画像の右上隅にある+Altボタンをタップし、画像の代替テキストを入力して、 [完了] をタップし、 [投稿] をタップするだけです。

今説明したプロセス。

これで、代替テキストについて理解できました。 コラボレーション フォームを使用して時間を節約する方法について詳しく学んでみませんか。

ご質問は、チャットまたはメールでsupport@socio.eventsまでお問い合わせください。

こちらの回答で解決しましたか?