モーダルまたはフライアウトの終了に専念する

Question

アクセシビリティに関する質問があります。 ボタンやリンクをクリックすると開くレイヤー/モーダルやフライアウトウィンドウがいくつかあります。

モーダルまたはポップアップを開くためにクリックされた元の要素にフォーカスを維持する必要があります。または、それらが閉じられた後、フォーカスがクリックされた要素に戻る必要があります。

現在モーダルウィンドウまたはフライアウトを閉じた後にページ上のIタブは、フォーカスiは、角ブートストラップモーダルと角度状態のプロバイダ構成を経由して開かれたカスタムフライアウトウィンドウを使用しています

を初めから開始したとき。

Answer 1

は、モーダルを開く前に、現在のフォーカスを維持することにより、上記の問題を解決し、モーダルがWAI-ARIA Authoring Practices - Modal Dialog状態から

Answer 2

公式の推薦を閉じているときにバックフォーカスを復元：

ダイアログが閉じ、返品を集中

• 呼び出し元要素は存在しなくなりました。次に、論理ワークフローを提供する別の 要素にフォーカスが設定されます。
  1. それは非常に低いユーザーであるが、すぐにダイアログを再起動する必要があります：
  2. ワークフロー設計は時折異なる要素に多くの論理的な選択を集中させることができ、以下の条件が含まれています。
  3. ダイアログで完了したタスクは、ワークフローの後続のステップに直接関連しています。

あなたのモーダルを開く前に集中していた要素にフォーカスを戻すには：、モーダルを開く前に

1. document.activeElementへの参照を保存します。
2. モーダルを閉じた後、focusは前のactiveElementへの参照です。

例：、モーダルを開く前に

document.activeElementへの参照を保存します。

let previousActiveElement = document.activeElement; 
// Open and close the modal 
if (document.body.contains(previousActiveElement)) { 
    previousActiveElement.focus(); 
} 

Answer 3

あなたのモーダルを開く前に集中していた要素にフォーカスを戻します。 モーダルを閉じた後、前のactiveElementに参照をフォーカスします。