inert

inert グローバル属性は論理属性で、要素とそのフラットツリーの子孫すべてが「不活性」になることを示す論理属性です。inert 属性は、操作可能であってはならないコンテンツの範囲に追加することができます。要素が不活性状態になると、その要素およびすべての子要素（リンク、ボタン、フォームコントロールなどの通常は操作可能な要素を含む）は、フォーカスを受け取ったりクリックされたりすることができなくなるため、無効化されます。また、inert 属性は、画面外にあるべき要素や非表示にするべき要素にも追加できます。不活性状態の要素とその子要素は、タブ順序およびアクセシビリティツリーから除外されます。

showModal() で生成されたモーダルダイアログ (<dialog>) は、不活性状態から脱します。つまり、先祖から不活性を受け継ぐことはなく、自身に inert 属性を明示的に設定した場合にのみ不活性になります。

HTML の不活性な要素と、そのフラットツリーの子孫要素は次のようになります。

ユーザーが要素をクリックしたときに click イベントが発行されないようにします。

要素にフォーカスが当たらないようにして、 focus イベントが発生することを防ぎます。

ブラウザーのページ内検索機能を使用しているときに、要素のコンテンツが検索/照合されるのを防ぎます。

ユーザーが要素内のテキストを選択できないようにします。これは、 CSS プロパティ user-select を使用してテキストの選択を無効にするのと同じです。

ユーザーが、編集可能な要素のコンテンツを編集できないようにします。これは例えば、テキストの <input> フィールドのコンテンツや、contenteditable が設定されたテキスト要素を含みます。

アクセシビリティツリーから要素とそのコンテンツを除外して、支援技術から要素とそのコンテンツを非表示にします。

他にも以下の機能を使用して、要素とその子孫要素を不活性状態に設定することができます。

CSS の interactivity プロパティ

DOM の HTMLElement.inert プロパティ