アクセシビリティ：スクリーンリーダー用にウェブサイトを準備する
読了時間：3分
サイト訪問者の中には、スクリーンリーダーなどの支援技術を使用してサイト内を移動する人もいます。スクリーンリーダーは、視覚障がいのある人が使用するアプリです。サイトのコンテンツをスキャンし、訪問者に「読み上げ」を行います。スクリーンリーダーを使用する訪問者は、クリックする場所を確認できない可能性があるため、通常は Tab キーを使用してサイト内を移動します。
サイトの DOM 順序は、スクリーンリーダーと Tab キーがハイライトしたり、ページのコンテンツを「読む」順序です。訪問者がサイト上で最高の体験ができ、コンテンツを理解して楽しむことができるように、論理的な順序に従う必要があります。
注意：
モビリティに問題がある訪問者など、一部の訪問者はスクリーンリーダーを使用せずに Tab キーを使用してサイト内を移動することがあります。したがって、サイトの DOM 順序が正しいことを常に確認することをおすすめします。
この記事では、次の項目について説明します：
サイトの DOM 順序について
DOM は、サイト上のパーツの順序です。サイト訪問者がスクリーンリーダーや Tab キーを使用している場合は、論理的な順序でサイト内を移動できる必要があるため、特に重要となります。たとえば、サイトメニューが最初に表示され、次にヘッダー内の残りのパーツ、ページタイトル、ページコンテンツの順で表示されるべきです。DOM の順序が正しくない場合、スクリーンリーダー / Tab キーはページコンテンツをスキップまたはジャンプする可能性があります。
Wix は自動的に DOM 順序を設定します。順序はパーツの視覚的な順序（左から右へ、そして上から下へ）を使用します。アクセシビリティツールを開発する際、Wix では以下のスクリーンリーダーを使用して製品をテストしています：
- Windows + Firefox または Chrome の場合：NVDA（無料のリーダー）
- iOS + Safari の場合：Voiceover（内蔵リーダー）
これは、上記のアプリケーションの機能を念頭に置いて、サイトの自動 DOM 順序を作成したことを意味します。キーボードの Tab キーまたはライブサイトのスクリーンリーダーを使用して、サイトの自動 DOM 順序をテストできます。
サイトの DOM 順序を変更する
サイトの DOM 順序をテストし、順序が論理的でないことに気付いた場合は、アクセシビリティウィザードで手動で変更することができます。ウィザードは、サイトをスキャンし、潜在的なアクセシビリティの問題を特定し、これらの問題を修正するための実用的な解決策を提供するツールです。これに加え、アクセシビリティウィザードを使用して、サイトの高度なアクセシビリティ設定を変更することもできます。
重要：
サイトのタブ順序が論理的であれば、何もする必要はありません。既に正しい順序を変更してしまうと、スクリーンリーダーや Tab キーを使用する訪問者に問題が発生する可能性があります。
DOM 設定を変更する方法：
- エディタトップバーにある「設定」を選択します。
- 「アクセシビリティ設定」を選択します。
- ウィザード右上の「その他のアクション」アイコン
を選択します。
- 「高度なアクセシビリティ設定」を選択します。
- 「自動 DOM 順序」を選択します。
- パネルのトグルを無効にします。
- ポップアップ画面で「オフにする」を選択します。
- エディタ左下で「レイヤー」アイコン
を選択します。 - リストを確認し、重複するパーツを削除します。これには、スクリーンリーダー使用者を混乱させる可能性のある不必要な重複パーツを含みます。
- 残りのパーツをドラッグし、希望の順序に変更します。
注意：
- Tab キーを使用してサイトを移動すると、テキストなどの静的なパーツではなく、インタラクティブなパーツのみを移動できます。テキストなどの静的なパーツでスクリーンリーダーをテストする場合、キーボードを使用してウェブサイトを適切に移動する方法について、ご利用スクリーンリーダーのヘルプセンターの指示に従ってください。
- 画面に固定されたパーツは、タブ順序の最後に自動的に配置されます。順序の早い段階で表示するには、パーツの固定を解除してヘッダーに配置することをおすすめします。
次のステップ：
- モバイルエディタを開き、同じ手順を繰り返します。
- アクセシビリティチェックリストに戻り、サイトのアクセシビリティに関する作業を続けてください。
お役に立ちましたか？
|