アクセシビリティ:視覚インジケーターについて
2分
視覚インジケーターとは、訪問者がキーボードを使用してライブサイトを移動する際、ボタンやリンクなどのインタラクティブ要素の周りに表示される青い枠線のことを指します。Wix エディタまたは Wix Studio エディタでサイトを構築すると、視覚インジケーターの機能が自動で有効となり、ライブサイトに表示されます。

Wix はどこで情報を入手しますか?
- Wix では、World Wide Web Consortium(W3C) が開発した Web Content Accessibility Guidelines(WCAG)文書に基づいて、推奨事項を作成しています。
- この記事は、上記 W3C が定める Focus Visible(2.4.7)の基準に基づいています。(英語)
視覚インジケーターが重要な理由
訪問者の中には、キーボードの「Tab」キーを使用してサイトを移動する方もいます。視覚インジケーターは、その際に現在の位置を示すためのもので、これにより訪問者は現在の位置を正確に把握できるようになっています。
視覚インジケーターが有効でない場合は、これらの訪問者がページ上で現在の位置を把握することができなくなるため、アクセシビリティの観点上、非常に重要です。
Wix サイトの視覚インジケーター
Wix では、構築したすべてのサイトで、自動的に視覚インジケーターが有効になります。
視覚インジケーターの色は、多くのサイトで使用できるようデザインされていますが、青色の背景に白色の塗りつぶしが設定されているボタンでは、インジケーターが見えにくくなる恐れがあります。そのため、訪問者がインジケーターを視認できるよう、サイト要素の色を再度確認することをおすすめします。
自身のサイトで視覚インジケーターを確認する方法:
視覚インジケーターを確認するには、エディタでサイトをプレビューするかライブサイトを開き、キーボードの「Tab」キーを使用してページの要素間を移動します。この際、画面に視覚インジケーターが表示されない場合は、アクセシビリティウィザードから設定を変更することができます。
視覚インジケーターを有効にする
Wix エディタでは、アクセシビリティウィザードから、視覚インジケーターを有効にする必要がある場合があります。
Wix Studio エディタを使用している場合:
Wix Studio エディタでは、視覚インジケーターが常に有効となるため、この設定を確認する必要はありません。
視覚インジケーターを有効にする方法:
- エディタにアクセスします。
- 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
- アクセシビリティウィザード右上の「その他のアクション」アイコン を選択します。
- 「高度なアクセシビリティ設定」を選択します。
- 「視覚インジケーター」を選択します。
- 「キーボードユーザーがサイト内を移動できるようにします」横のトグルを有効にします。

次のステップ:
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを向上させましょう。