0Pricing
Web Accessibility Academy · レッスン

レイヤーを閉じたときにフォーカスを戻す

ユーザーが離れた場所へフォーカスを戻します。

「レイヤーを閉じたときにフォーカスを戻す」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

レイヤーはフォーカスを借りる

モーダル、メニュー、ドロワーを開くと、フォーカスはその中へ移動します。閉じたときは、ユーザーがいた場所へフォーカスを戻す必要があります。

フォーカスを失う問題

閉じたレイヤーが削除された要素にフォーカスを残すと、フォーカスはページのbodyに戻ります。ユーザーは現在位置がわからないまま取り残されます。

トリガーを記憶する

対策は開く前から始まります。レイヤーを開くきっかけとなった要素への参照を保存します。通常はdocument.activeElementです。

const trigger = document.activeElement;

閉じるときに復元する

レイヤーを閉じたら、保存したトリガーに対してfocus()を呼び出し、ユーザーを開始時の場所に戻します。

trigger.focus();

完全な往復

開くときはトリガーを保存してレイヤーにフォーカスし、閉じるときはレイヤーを非表示にしてトリガーへ戻します。この流れが、閉じられるレイヤーにおけるフォーカスの契約です。🔁

ネイティブのdialogが役立つ

ブラウザーのdialog要素では、close()を呼び出すと開いた元の要素へ自動的にフォーカスが戻るため、手動で管理する手間を省けます。

myDialog.close();

すべての終了経路に対応する

レイヤーを閉じる方法にかかわらず、フォーカスを戻してください。閉じるボタン、Escapeキー、背景のクリックのいずれでも、ユーザーを元に戻す必要があります。

トリガーがなくなった場合

レイヤーを開いている間にトリガーが削除された場合は、代わりに適切な近くの要素へフォーカスを移してください。どこにも移さないでください。

これほど重要な理由

マウスを使う視覚的なユーザーはほとんど気づきませんが、キーボードユーザーやスクリーンリーダーユーザーにとって、フォーカスが戻らないと機能が使えなくなることがあります。

キーボードだけでテストする

Enterでレイヤーを開き、Escapeで閉じて、開く操作を行ったボタンにフォーカスリングが再び表示されることを確認してください。

習慣にする

オーバーレイを作るときは、フォーカスを戻すことを後回しにせず、必要な一部として扱ってください。開閉のロジックを追加した時点で組み込みます。

確認問題

カスタムモーダルを閉じました。フォーカスを移すべき正しい場所はどこですか。

まとめ

開くときにトリガーを保存し、どの閉じ方でもそこへフォーカスを戻し、可能ならネイティブのdialogを利用するという一連の流れを学びました。🎯

よくある質問

「レイヤーを閉じたときにフォーカスを戻す」レッスンは無料ですか？

はい。「レイヤーを閉じたときにフォーカスを戻す」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「レイヤーを閉じたときにフォーカスを戻す」で何を学びますか？

ユーザーが離れた場所へフォーカスを戻します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「レイヤーを閉じたときにフォーカスを戻す」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. tabindex 0、-1、そして正の値は使わない
  2. アクション後にフォーカスを移動する
  3. レイヤーを閉じたときにフォーカスを戻す
  4. ウィジェットでroving tabindexを管理する
← Web Accessibility Academyに戻る