背景をinertにしてaria-modalを設定する

フォーカスを閉じ込めても、モーダルの背後にあるコンテンツはDOM内に残っています。遮断しなければ、スクリーンリーダーがそこへ移動してしまう可能性があります。

inert属性を使うと、要素とそのすべての子要素を、一度にフォーカス不可、クリック不可にし、支援技術からも除外できます。

モーダルを開いたら、その外側にあるすべての要素へinertを追加します。これで、誰も背後のページへ実際にアクセスできなくなります。

モーダルを閉じたら、inert属性を削除してページを再び操作可能にします。これを忘れると、ページが操作不能なままになります。

showModal()で開いたネイティブのdialogは、ページの残りの部分を自動的にinertにします。そのため、追加のコードなしでこの保護が得られます。

aria-modalをtrueに設定すると、ダイアログが開いている間、外側のコンテンツは利用できないことを支援技術に伝えられます。

注意してください。aria-modalが伝えるのはスクリーンリーダーへの情報だけです。フォーカスやクリックを実際に遮断するわけではないため、inertも必要です。

堅牢な実装では、背後にinertを設定し、ダイアログにaria-modalを設定します。一方が実際に遮断し、もう一方が境界を通知します。

inertが広くサポートされる前は、開発者は背後のコンテンツにaria-hiddenを設定していました。コンテンツを読み上げ対象から隠せますが、キーボードフォーカスまでは止められませんでした。

よくある不具合の1つは、aria-hiddenを広範囲に適用してダイアログまで含めてしまうことです。modalが非表示領域に入らないようにしてください。

モーダルを表示した状態で、ブラウザーのaccessibility treeを開きます。背後のページがツリーから消え、ダイアログだけが残っていることを確認してください。✅

背後のページをinertにし、aria-modalを宣言する方法を学びました。これにより、ユーザーがアクセスできるのは実質的にモーダルだけになります。🎯