inert
inert グローバル属性は論理属性で、これは論理属性で、ブラウザーがその要素を無視することを示します。inert 属性を使うと、要素のフラットツリーの子孫（モーダルの <dialog> など）のうち、不活性化を免れないものはすべて無視されます。inert 属性は、フォーカス関連のイベントや支援技術からのイベントなど、ユーザーから送られる入力イベントもブラウザーが無視するようにします。
具体的には、inertは以下のことを行います。
- ユーザーが要素をクリックしたときに
clickイベントが発行されないようにします。 - 要素にフォーカスが当たらないようにして、
focusイベントが発生することを防ぎます。 - 要素およびそのコンテンツをアクセシビリティツリーから除外することで、支援技術から隠します。
<body inert>
<!-- content -->
</body>
inert 属性は、インタラクティブであってはならないコンテンツのセクションに追加することができます。要素が不活性化されると、リンクやボタン、フォームコントロールのような通常インタラクティブな要素を含む、その要素のすべての子孫は、フォーカスを得たりクリックしたりすることができないため、無効となります。
inert 属性は、オフスクリーンや非表示にすべき要素にも追加することができます。不活性な要素は、その子孫とともに、タブ順序とアクセシビリティツリーから取り除かれます。
アクセシビリティの考慮
inert` 属性を使用する際には、アクセシビリティに十分配慮してください。既定では、要素やそのサブツリーが不活性であるかどうかを視覚的に指示する方法はありません。ウェブ開発者として、アクティブなコンテンツ部分と不活性なコンテンツ部分を明確に示すことは、あなたの責任です。
コンテンツの不活性化について視覚的・非視覚的な手がかりを提供する一方で、視覚ビューポートにはコンテンツの一部しか格納されていない可能性があることも覚えておいてください。ユーザーはコンテンツの小さなセクションにズームインされるかもしれませんし、コンテンツをまったく見ることができないかもしれません。不活性な節が不活性に見えない場合、不満や使い勝手の悪さにつながる可能性があります。
仕様書
| Specification |
|---|
| HTML Standard # the-inert-attribute |
ブラウザーの互換性
BCD tables only load in the browser