ブラウズモードとフォーカスモード
ユーザーがページを操作する2つの方法を理解します。
「ブラウズモードとフォーカスモード」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
2つの操作方法
デスクトップのスクリーンリーダーには2つのモードがあります。ブラウズモードではコンテンツを読み、フォーカスモードでは入力します。両方を知ることで、多くの混乱を解消できます。🔁
ブラウズモードで読み上げる
ブラウズモードでは、H、K、矢印キーなどでページを移動します。スクリーンリーダーがキー入力を受け取り、見出しやリンクを確認できるようにします。
仮想的なコピー
ブラウズモードは、ページを平坦化した仮想バッファー上で動作します。そのため、どの文書でも同じように矢印キーでテキストを移動できます。
フォーカスモードで入力する
テキストフィールドに到達すると、スクリーンリーダーはフォーカスモードに切り替わります。これでキー入力は移動ではなく、入力欄に直接送られます。
切り替えが重要な理由
2つのモードがなければ、Hを入力すると文字が入力されず、見出しへ移動してしまいます。フォーカスモードによって、フォームに実際に入力できるようになります。
自動的に切り替わる
フォーカスが編集可能なフィールドや、キー入力をそのまま必要とするウィジェットに移ると、NVDAは自動的にフォーカスモードへ切り替えます。
モードを手動で切り替える
手動で切り替えることもできます。NVDAではNVDAとSpaceを押すと、自動判定が正しくない場合にブラウズモードとフォーカスモードを切り替えられます。
NVDA: press NVDA + Space to toggle modesVoiceOverの場合
VoiceOverでは、入力中の状態をQuick Nav offと呼びます。Quick Navのオンとオフを切り替えることで、2つのモードと同じように探索と操作を切り替えられます。
カスタムウィジェットは混乱を招く
偽のボタンやメニューのふりをするdivがあると、スクリーンリーダーが誤ったモードのままになり、キー入力が役に立たなくなることがあります。
適切なロールで解決する
正しいロールを設定すると、スクリーンリーダーはフォーカスモードに切り替えるタイミングを判断できます。実際のフォームコントロールと適切なARIAロールによって、切り替えが正しく行われます。
両方の操作経路をテストする
監査するときは、ブラウズモードで読み上げが機能することと、フォーカスモードに切り替わった後にすべての入力欄でテキストを入力できることを確認してください。
簡単な確認
スクリーンリーダーのフォーカスモードでは、ユーザーは何ができるでしょうか。
まとめ
ブラウズモードでは読み上げとナビゲーションを行い、フォーカスモードでは入力と操作を行います。正しいロールがあれば自動的に切り替わるため、ユーザーが行き詰まることはありません。✅
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「ブラウズモードとフォーカスモード」レッスンは無料ですか?
はい。「ブラウズモードとフォーカスモード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「ブラウズモードとフォーカスモード」で何を学びますか?
ユーザーがページを操作する2つの方法を理解します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ブラウズモードとフォーカスモード」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか?
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- NVDA、VoiceOver、TalkBackを起動する
- 基本ジェスチャーとショートカットキー
- ブラウズモードとフォーカスモード
- 再現可能なスクリーンリーダーテスト