アクセシビリティ：画像とギャラリーを準備する
11分
視覚障がいのある訪問者は、スクリーンリーダーなどの支援技術を使用してサイトを閲覧することがあります。代替テキストを使用して画像やギャラリーに説明を追加し、これらの訪問者がメディアの情報にアクセスできるようにしましょう。
代替テキストは、サイトのメディアに関する情報を提供し、検索エンジンやスクリーンリーダーがメディアを「読む」のに役立ちます。
Wix はどこで情報を入手しますか？
- Wix では、World Wide Web Consortium（W3C） が開発した Web Content Accessibility Guidelines（WCAG）文書に基づいて、推奨事項を作成しています。
- この記事は、以下の達成基準に基づいています：
エディタで代替テキストを追加する
代替テキストは、スクリーンリーダーを使用する訪問者が、サイトの画像コンテンツを理解できるようにするためのものです。そのため、画像をアップロードする際には、代替テキストを追加することをおすすめします。
単独の画像に追加する
「設定」パネルから、サイトビルダー（Wix エディタおよび Wix Studio エディタ）の画像に代替テキストを追加しましょう。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上の画像をクリックします。
- 「設定」アイコン
をクリックします。 - 「画像には何が含まれていますか？」下で画像の説明を入力します。
- キーボードの Enter キーを押して変更内容を保存します。
ギャラリーに追加する
サイトのメディアマネージャーを使用して、ギャラリー画像に代替テキストを追加します。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上のギャラリーをクリックします。
- 「メディアを管理」または「画像を追加・管理」をクリックします。
- 画像をクリックして選択します。
- 右側で画像のタイトルを入力します。
- （Wix プロギャラリーのみ）画像のタイトルと異なるものにしたい場合は、「代替テキスト」下で画像の代替テキストを編集します。
- 「完了」をクリックします。
ヒント：
代替テキストを反映させるには、必ずサイトを公開してください。
注意：
現在、画像やギャラリーに代替テキストを一括で追加することはできません。この機能をご希望の場合は、機能リクエストに投票してください。
アクセシビリティウィザードで代替テキストを追加する
アクセシビリティウィザードでサイトを確認している際、画像に代替テキストを追加するよう求められる場合があります。ウィザードのタスクを使用すると、サイト訪問者に簡潔で明確な代替テキストを素早く追加することができます。
アクセシビリティウィザードは、Wix エディタと Wix Studio エディタの両方で使用できるため、両者のサイトのアクセシビリティを向上させることができます。
ヒント：
代替テキストを追加したら、パネル下の「適用する」をクリックして変更内容を保存することができます。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
- 右側のアクセシビリティウィザードパネルで「スキャンする」をクリックします。
- 「検出された問題」タブを選択します。
- 修正したいページをクリックします。
- 「画像に代替テキストを追加」をクリックし、該当するオプションを選択します：
- （代替テキストが設定されていない画像がある場合）「今すぐ始める」をクリックします。
- （以前にすべての画像に代替テキストを追加している場合） 「編集」をクリックします。
- 「編集」アイコン
をクリックします。該当する画像横のチェックボックスを選択し、入力欄にテキストを入力します。
- 「適用する」をクリックします。
AI で代替テキストを生成する
画像が大量にある場合は、アクセシビリティウィザードの AI ツールを使用することで、代替テキストを素早く生成することができます。特定の画像に対して代替テキストを生成するか、ページ上のすべての画像に対して代替テキストを生成するかを選択することができます。
重要：
- AI が生成した代替テキストが常に完全に正確であることを保証することはできません。そのため、生成されたテキストを確認し、必要に応じて編集することをおすすめします。
- SVG または GIF 画像は、AI 代替テキストツールではサポートされていません。これらのファイルの代替テキストは手動で入力する必要があります。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
- 右側のアクセシビリティウィザードパネルで「スキャンする」をクリックします。
- 「検出された問題」タブを選択します。
- 修正したいページをクリックします。
- 「画像に代替テキストを追加」をクリックし、該当するオプションを選択します：
- （代替テキストが設定されていない画像がある場合）「今すぐ始める」をクリックします。
- （以前にすべての画像に代替テキストを追加している場合） 「編集」をクリックします。
- 1つの画像に対して代替テキストを生成するか、すべての画像に対して代替テキストを生成するかを選択します：
- シングル画像の代替テキストを生成する：
- 該当する画像の横にある「編集」アイコン
- 「Generate（生成する）」をクリックします。
- 該当する画像の横にある「編集」アイコン
- すべてのページの画像に対して代替テキストを生成する：「自動生成する」をクリックします。
- シングル画像の代替テキストを生成する：
- 生成されたテキストを確認し、必要な変更を加えます。
- 「適用する」をクリックします。
注意：
- すべての画像に対して代替テキストを生成する場合、装飾としてマークされている画像や、すでに代替テキストが含まれている画像には、代替テキストは生成されません。
- AI ツールがページ上の画像の代替テキストを生成できないことがあります。必要に応じて「再試行する」をクリックできます。
画像を装飾用としてマークする
装飾画像とは、デザインや装飾目的のために使用する画像のことで、サイトのコンテンツとは直接関係しません。
サイト上の画像が装飾的で文脈に関連していない場合は、代替テキストを追加する必要はありません。アクセシビリティウィザードで画像を「装飾」としてマークして、検索エンジンとスクリーンリーダーが自動的に画像をスキップするようにしましょう。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
- 右側のアクセシビリティウィザードパネルで「スキャンする」をクリックします。
- 「検出された問題」タブを選択します。
- 修正したいページをクリックします。
- 「画像に代替テキストを追加」をクリックし、該当するオプションを選択します：
- （代替テキストが設定されていない画像がある場合）「今すぐ始める」をクリックします。
- （以前にすべての画像に代替テキストを追加している場合） 「編集」をクリックします。
- 該当する画像の横にある「編集」アイコン
- 「この画像は装飾的なもので、代替テキストは必要ありません。」横のチェックボックスを選択します。
- 「適用する」をクリックします。
参考：
リンクを含む画像には代替テキストが必要です。装飾としてマークせず、代替テキストを追加してください。
画像内のテキスト
これは写真やテキストを含む画像を指します。
画像内のテキストは、検索エンジンやスクリーンリーダーで「読む」ことはできません。ただし、画像が必要で、テキストにサイトへの文脈がある場合は、画像の説明に追加できます。
テキストにコンテキストがない場合、またはサイトのコンテンツに貢献していない場合は、画像の説明に追加する必要はありません。
画像の説明に追加すべき画像テキストと追加すべきでない画像テキストの詳細については、以下のオプションを選択してください。
重要なテキスト
重要でないテキスト
テキスト画像
テキスト画像にはテキストのみが含まれ、その他の画像要素は含まれません。たとえば、フォントの画像やテキストのみを含むロゴなどがあります。
これらは「実際の」テキスト要素ではないため、テキストの画像を検索エンジンやスクリーンリーダーで読み取ることはできません。サイトの SEO とアクセシビリティを向上させるために、可能な限りそれらを避け、実際のテキスト要素に置き換えることをおすすめします。
次のステップ：
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。