テック技報最新号へ →
デザイン

モーダルを開いている間は、裏側の要素に HTML の inert 属性を付けて、クリックも読み上げも止める

裏側を操作できなくするためにJSでフォーカスを閉じ込めたり、クリックを止めたりしなくていい。inert を付けるだけで、操作・フォーカス・スクリーンリーダーの読み上げがまとめて無効になる。

@wokobo_net · 2026-10-17
#HTML#アクセシビリティ#モーダル#inert#JSなし

どんな問題を解決するか / いつ使うか

自作のモーダルやドロワー、全画面メニューを開いているのに、裏のリンクにTabキーでフォーカスが移ったり、読み上げソフトが裏の内容を読んだりする問題。<dialog> を使わずに作った重ねる系のUIで使う。

やり方

html
<main id="page">…ページ本体…</main>
<div class="drawer" hidden>…メニュー…</div>
js
// 開くとき
page.inert = true;   // <main inert> と同じ
drawer.hidden = false;
// 閉じるとき
page.inert = false;
drawer.hidden = true;
  • inert が付いた要素とその中身は、クリック・フォーカス・テキスト選択ができなくなり、支援技術からも見えなくなる。
  • 開閉の切り替え以外にJSは要らない。

注意点

  • モーダルなら、まず HTML の <dialog> を showModal() で開く方法を検討する。この場合は裏側が自動で操作できなくなる（モーダルはJSで開閉を作り込まず、HTMLの <dialog> 要素を使う）。inert は <dialog> を使えないドロワーなどで役に立つ。
  • 見た目でも裏側が操作できないと分かるように、背景を暗くするなどの表示も付ける。
  • 閉じたあとは、開くきっかけになったボタンにフォーカスを戻す。
  • JSのコード例は一般的な書き方で補ったもの（元の投稿はテキストのみ）。

出典

X の元の投稿を開く