アクセシビリティ:画像とギャラリーを準備する
読了時間:6分
視覚障がいのある訪問者は、スクリーンリーダーなどの支援技術を使用してサイトを閲覧することがあります。代替テキストを使用して画像やギャラリーに説明を追加し、訪問者がアクセスできるようにしましょう。
代替テキストはメディアに関する情報を提供し、検索エンジンとスクリーンリーダーがメディアを「読む」のに役立ちます。
この記事では、次の項目について説明します:
代替テキストを追加する
代替テキストを使用すると、スクリーンリーダーを使用する訪問者がサイトのコンテンツにアクセスして理解できるようになります。そのため、Wix ストアや Wix ブッキングなどのアプリに表示されるメディアを含む、関連するすべての画像に代替テキストを追加することをおすすめします。
サイトビルダー(Wix エディタと Wix Studio エディタ)の画像やギャラリーに代替テキストを追加しましょう。Wix エディタを使用している場合は、アクセシビリティウィザードで代替テキストを追加することもできます。
アクセシビリティ設定
Wix Studio エディタ
Wix エディタ
ウィザードを使用して、サイト画像と Wix ストアやブッキングアプリに表示される画像に代替テキストを追加します。
サイト画像に代替テキストを追加する方法:
- エディタトップメニューにある「設定」をクリックします。
- 「アクセシビリティ設定」を選択します。
- 「サイトをスキャン」をクリックします。
- 「代替テキスト」と表示されているカードを選択します。
- 「代替テキストをここに追加」欄に画像の説明を入力します。
- 「代替テキストを設定」をクリックします。
アプリ画像に代替テキストを追加する方法:
- エディタトップメニューにある「設定」をクリックします。
- 「アクセシビリティ設定」を選択します。
- 「サイトをスキャン」をクリックします。
- 「ショップ」または「ブッキング」ドロップダウンを選択します。
- 「代替テキスト」と表示されているカードを選択します。
- (ショップのみ)各商品の画像、または商品バリエーションの画像を選択します。
- 「代替テキストをここに追加」欄に画像の説明を入力します。
- 「代替テキストを設定」をクリックします。
- 「完了する」をクリックします。
ヒント:
代替テキストを反映させるには、必ずサイトを公開してください。
注意:
現在、画像やギャラリーに代替テキストを一括で追加することはできません。この機能をご希望の場合は、機能リクエストに投票してください。
画像を装飾用としてマークする
装飾画像は、美的または装飾的な目的でのみ使用されるため、サイトのコンテンツには影響を与えない画像です。
サイト上の画像が装飾的でサイトの文脈に関連していない場合は、代替テキストを追加する必要はありません。アクセシビリティウィザードで画像を「装飾」としてマークして、検索エンジンとスクリーンリーダーが自動的に画像をスキップするようにしましょう。
画像を装飾用としてマークする方法:
- エディタ上部にある「設定」をクリックします。
- 「アクセシビリティ設定」をクリックします。
- 「サイトをスキャン」をクリックします。
- 該当する画像の「代替テキスト」というタイトルのカードをクリックします。
- 「この画像は装飾用であり、説明は必要ありません。」横のチェックボックスを選択します。
注意:
代替テキストがない場合にのみ、画像を装飾としてマークすることができます。代替テキストで画像を装飾としてマークするには、エディタ内から代替テキストを削除し、ウィザードでサイトを再スキャンしてください。
画像内のテキスト
これは写真やテキストを含む画像を指します。
画像内のテキストは、検索エンジンやスクリーンリーダーで「読む」ことはできません。ただし、画像が必要で、テキストにサイトへの文脈がある場合は、画像の説明に追加できます。
テキストに文脈がない、またはサイトのコンテンツに貢献していない場合は、画像の説明に追加する必要はありません。
画像の説明に追加すべき画像テキストと追加すべきでない画像テキストの詳細については、以下のオプションを選択してください。
重要なテキスト
重要でないテキスト
テキスト画像
テキスト画像にはテキストのみが含まれ、その他の画像要素は含まれません。たとえば、フォントの画像やテキストのみを含むロゴなどがあります。
これらは「実際の」テキスト要素ではないため、テキストの画像を検索エンジンやスクリーンリーダーで読み取ることはできません。サイトの SEO とアクセシビリティを向上させるために、可能な限りそれらを避け、実際のテキスト要素に置き換えることをおすすめします。
次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。
お役に立ちましたか?
|