inert

inert グローバル属性は論理属性で、要素とそのフラットツリーの子孫すべてが「不活性」になることを示す論理属性です。 showModal() に対応するモーダルダイアログ (<dialog>) は、不活性状態から脱します。つまり、先祖から不活性を受け継ぐことはなく、自身に inert 属性を明示的に設定した場合にのみ不活性になります。

具体的には、inertは以下のことを行います。

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

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

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

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

ユーザーが、編集可能な要素のコンテンツを編集できないようにします。

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

html

<div inert> <!-- コンテンツ --> </div>

inert 属性は、インタラクティブであってはならないコンテンツのセクションに追加することができます。要素が不活性化されると、リンクやボタン、フォームコントロールのような通常インタラクティブな要素を含む、その要素のすべての子孫は、フォーカスを得たりクリックしたりすることができないため、無効となります。

inert 属性は、オフスクリーンや非表示にすべき要素にも追加することができます。不活性な要素は、その子孫とともに、タブ順序とアクセシビリティツリーから取り除かれます。

メモ: inert はグローバルな属性であり、どんな要素にも使用することができますが、一般的にはコンテンツのセクションに使用されます。個々のコントロールを「不活性」にするには、代わりに disabled 属性と CSS の :disabled スタイルを使用することを検討してください。