サイト制作

HTMLのinertとは？見えている領域を操作対象から外すときの注意点

慈愛妃きづな

2026-11-08

この記事には広告・アフィリエイトリンクが含まれます。

リンクやボタンを含む領域をまとめて非操作状態にするinert。非表示との違い、支援技術への影響、解除時の確認を解説します。

inertは、見た目を消す属性ではない

inertは、要素とその子孫を操作対象から外すためのHTML属性です。リンクやボタンがクリックやフォーカスの対象にならなくなり、Tabキーによる移動順やアクセシビリティツリーからも除かれます。

一方、属性を付けただけで画面から消えるわけではありません。見えているのに押せない領域を作れるため、何が操作できる状態なのかを視覚的にも分かるようにする必要があります。

inertは論理属性です。HTMLで inert="false" と書いても、属性が存在するため無効化の指定として働きます。解除したいなら属性を取り除くか、JavaScriptのプロパティに false を設定します。

たとえば panel.inert = true; で対象を非操作状態にし、panel.inert = false; で解除するという書き方です。文字列としての"false"と、真偽値のfalseを混同しないことが、切り替え処理の大切な確認点になります。

一つのボタンを無効にするだけなら、その部品のdisabledを検討できます。inertは領域全体を対象にするため、内側の説明やリンクまで支援技術から除かれる影響があります。

単にクリックだけを止めるCSSや、支援技術から隠す属性と同じ効果だと思わないようにしましょう。表示中の必要な説明まで操作や読み上げの対象から外してしまわないか、指定する範囲を狭く確認します。

モーダルなどで背景へinertを付ける場合は、閉じた後に解除されるか、キーボードのフォーカスを戻せるかを確かめます。例外処理で解除が抜けると、画面は見えるのに操作できない状態が残ります。

ネイティブのdialogをshowModal()で開く場合には、モーダルダイアログ固有の動作もあります。自作処理を重ねる前に標準の挙動を確認してください。この記事は仕様の解説であり、完成したモーダル実装を一式提供するものではありません。