ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介

ユーザー操作の一括無効化で役立つ！
HTMLのinert属性の紹介

4月21日メンテナンス済み / 株式会社 ICS

HTML

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。

カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。

マウスやタッチ操作を無効化したい
テキスト選択を無効化したい
キーボードフォーカスをあえて無効化したい
音声読み上げをあえて無効化したい

必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。

inert属性は、指定された要素を子孫要素含めて非活性な状態として扱い、あらゆるユーザー操作を無効化します。

この記事では、inert属性について作例とあわせて紹介します。

inert属性の使い方

冒頭でも少し説明しましたが、inert属性を有効にすると子孫要素を含め要素を非活性な状態として扱い、あらゆるユーザー操作を無効化します。また、アクセシビリティーツリーからは削除され、音声読み上げソフトの読み上げも無効となります。

inert属性は論理属性で、JavaScriptではHTMLElement.inertを利用して値を指定します。

▼HTMLでの利用例

<div inert>
  <!-- div要素含め、子孫要素が非活性な状態となる -->
</div>

▼JavaScriptでの利用例

// id="target"の要素にinert属性を付与する
const element = document.querySelector("#target");
element.inert = true;

これまでの実装方法と比較

inert属性を使わずにinert属性の動作を再現する場合、次のいくつかの設定が必要でした。

クリックやタッチ操作を無効化する
- CSSでpointer-events: noneを指定する
選択を無効化する
- CSSでuser-select: noneを指定する
キーボードフォーカスを無効化する
- HTMLでtabindex="-1"を指定する
音声読み上げを無効化する
- HTMLでaria-hidden="true"を指定する

従来の方法では、UIの状態が切り替わるときにこれらの設定をJavaScriptで操作します。inert属性を利用することで各ユーザー操作をまとめて無効化できます。

inert属性を含め、それぞれのプロパティや属性の動作を確認できるサンプルを用意しましたので、実際に触って確認してみてください。

▼各プロパティの動作確認サンプル

各プロパティの動作確認サンプル

操作を無効化する別の方法として、disabled属性で非活性化させる方法があります。disabled属性は特定の要素でのみ使用できる属性なので、該当しない要素をinert属性で制御するといった使いわけが考えられます。

また、disabled属性とinert属性はまったく同じものというわけでもなく、disabled属性の場合はアクセシビリティーツリーから残るといった挙動に違いがあります。

※display: noneを使用することでもユーザーインタラクションを無効化できますが、要素自体が非表示になりレイアウトにも影響を与えてしまうため、同じ用途で使用できませんでした。

`inert`が役立つ場面

inert属性が役立つのは、DOMには残しておきたいものの、一時的に操作だけ無効化したい場面です。たとえば、次のようなケースが考えられます。

モーダルやハンバーガーメニューの背面を一時的に操作不可にしたい
カルーセルで非アクティブな項目を見せつつ、操作だけ無効化したい
フォームの送信中や読み込み中に、入力欄やボタン全体をまとめて無効化したい
条件によって不要になった入力欄を、表示は残したまま一時的に無効化したい
画面外に配置したメニューやドロワーをアニメーション用にDOMへ残しつつ、フォーカスや操作だけ防ぎたい

作例の紹介

ここからはinert属性の利用が考えられる作例を紹介します。

入力内容の送信から送信完了の間を制御する

次の作例は、入力内容の送信から送信完了までの間、一時的にユーザー操作を受け付けないようにしたものです。

実際には、入力内容は送信ボタンが押されてもどこにも送信されません。この作例では疑似的に送信をsetTimeout()で待機して、送信が完了したらアラートを表示する実装をしています。待機中はformタグを<div inert>で囲い、CSSで半透明にしています。

▼入力内容の送信完了を待機する例

入力内容の送信完了を待機する例

inert属性が設定されている間はフォームの操作を無効化し、表示上の送信連打防止も行えています。

注意点として、フォームでよく利用するfieldset、input、buttonタグにはdisabled属性が存在します。これらの要素を個別で非活性化したい場合は、disabled属性を使用したほうがよりウェブ標準の仕様に準拠したマークアップができるかもしれません。

カルーセルUIの前後スライドに適用する

カルーセルUIを実装するとき、前後のスライドを見切れで非表示にしたり、反対にUIの視覚的なアフォーダンスを高めるために前後のスライドを部分的に表示したい場合があります。どちらの場合も、前後のスライドのユーザー操作を無効化したいときにinert属性が役立ちます。

次の作例は、前後のスライドを部分的に表示したカルーセルUIで、非アクティブなスライドのユーザー操作をinert属性で抑制しているサンプルです。前後の移動はボタンで行います。

▼カルーセルUIの前後スライドを制御する例

カルーセルUIの前後スライドを制御する例

作例では、アクティブなスライドだけを操作可能にし、それ以外のスライドには次の対応をおこなっています。

スライド要素（.carouselSlide）は、アクティブ状態に応じてaria-hiddenを切り替える
スライド内容の要素（.carouselSlideInner）にinert属性を指定する

このように、見えているが現在は操作させたくない領域だけをまとめて非活性化できるのがinert属性の利点です。

`dialog`タグを使用しないモーダルなUIで、背面を制御する

今回はハンバーガーメニューを例に紹介します。ハンバーガーメニューはメニューの構成がサイトによってさまざまで、dialogタグを利用せずモーダルな実装をすることが多いです。開かれたメニューを画面全域で覆ってモーダルダイアログのような表示にしたいとき、背面の制御にinert属性が役立ちます。

※HTML標準のdialogタグをshowModal()メソッドで表示すると、モーダルダイアログの外側が一切操作できなくなります。inert属性はそれと同様の動作を任意の要素で行えるものです。

背面の制御については『HTMLでモーダルUIを作るときに気をつけたいこと』の「課題2: 裏側にキーボードフォーカスされる現象」でも紹介しています。紹介記事では次の対策を行っていました。

背面にキーボードフォーカスが当たらないようにJSで制御する
背面の音声読み上げが行われないようにaria-hidden="true"を一時的に指定する

次の作例では、両方の対策をinert属性でまとめて行っています。

▼モーダルなメニューの背面を制御する例

モーダルなメニューの背面を制御する例

作例のポイントとして、キーボードフォーカスの順番が自然になるようにDOM構造では開閉ボタンの後ろにメニューを配置しています。

音声読み上げの対策は、aria-hiddenの指定と同じように必要な数だけinert属性の指定が必要ですが、それ以外の対策はまとめて行えています。

コラム: その他の注意点

inert属性が有効になっている要素は、Chromeの開発者ツールにある「ページ内から要素を選択する」機能で選択できません。デバッグの際によく利用されている方は注意が必要です。

開発者ツールから選択できない例

また、inert属性は指定しても画面上の表示は変化しません。操作できないことが視覚的にも伝わるように、属性の切り替わりにあわせて半透明表示やカーソル表現の調整など、個別でスタイルの追加を検討するとよいでしょう。

inert属性を指定してもスタイルが変更されない例

CSSの`interactivity: inert`

CSSにはinteractivityプロパティがあり、interactivity: inertを指定すると要素と子孫要素をCSSからinert状態にできます。用途はHTMLのinert属性と似ています。

interactivity: inertが役立つのは、要素の状態をCSSのクラスや疑似クラス、アニメーションと連動して切り替えたい場面です。たとえば、カルーセルで非表示や非アクティブなページだけをまとめて操作不可にしたい場合、状態に応じてクラスを付け替えるだけで制御しやすくなります。HTMLのinert属性はHTMLやJavaScriptから明示的に非活性化したいときに向いており、interactivity: inertは見た目やレイアウトの状態変化にあわせてCSSから非活性化したいときに向いています。

▼CSSでの利用例

<div class="card is-inactive">
  <a href="#">詳細へ</a>
  <button type="button">操作する</button>
</div>

.card.is-inactive {
  interactivity: inert;
  opacity: 0.4;
}

CSSのinteractivity: inertとHTMLのinert属性を比較できる作例も用意しました。

対応ブラウザ

HTMLのinert属性は、Chrome・Edge 102（2022年5月）、Safari 15.5（2022年5月）、Firefox 112（2023年4月）以上で利用できます。

参照：Can I use…

CSSのinteractivityプロパティは、Chrome・Edge 135（2025年4月）以上で利用できます。

参照：Can I use…

まとめ

あらゆるユーザー操作を無効化するinert属性について紹介しました。視覚的に表示しつつも、あらゆるユーザー操作を一時的に無効化したいときに役立ちます。使用の際は、各操作の動作確認も忘れずにおこないましょう。

disabled属性が利用可能な要素や、操作方法が複雑なUIでinert属性を利用したい場合はとくに検討が必要です。今回紹介した作例が参考になれば幸いです。

※この記事が公開されたのは3年前ですが、今月4月に内容をメンテナンスしています。

ICS MEDIA