アクセシビリティ：フォーカスインジケーター（視覚インジケーター）について
この記事内
- フォーカスインジケーターが重要な理由
- Wix サイトのフォーカスインジケーター
- フォーカスインジケーターを有効にする
サイトのアクセシビリティを最適化する際、「フォーカスインジケーター」という設定が表示されることがあります。これは、訪問者がキーボードを使用してライブサイトを移動する際、ボタンやリンクなどのインタラクティブ要素の周りに表示される青い枠線のことを指します。
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 エディタでは、フォーカスインジケーターが常に有効となるため、この設定を確認する必要はありません。
フォーカスインジケーターを有効にする方法：
- エディタにアクセスします。
- 画面上部の「設定」をクリックし、「アクセシビリティ設定」を選択します。
- エディタ右側のパネルで「スキャンする」をクリックします。
- 「検出済みの問題」タブをクリックします。
- 「サイトレベル」ドロップダウンを開き、「フォーカスインジケーターを表示」をクリックします。
- 「視覚インジケーターを追加」トグルを有効にします。
- 「ページに追加」をクリックします。
注意：
Wix エディタサイトでフォーカスインジケーターを有効にすると、無効にすることはできません。
次のステップ：
アクセシビリティチェックリストに戻り、サイトのアクセシビリティを改善しましょう。