inert 属性は、フォーカス イベントや支援技術からのイベントなど、要素のユーザー入力イベントを削除および復元する方法を簡素化するグローバル HTML 属性です。
Inert は、dialog 要素のデフォルトの動作です。たとえば、showModal を使用してユーザーが選択するためのダイアログを開き、画面から非表示にする場合などです。<dialog> を開くと、ページの残りの部分は機能しなくなります。たとえば、リンクをクリックしたり、Tab キーで移動したりできなくなります。
inert 属性を使用すると、他の要素に対しても同じ動作を実現できます。
不活性とは、動く能力がないことを意味します。不活性なものをマークすると、その DOM 要素から動きやインタラクションが削除されます。
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
ここでは、inert が button2 を含む 2 番目の <div> 要素で宣言されているため、この <div> に含まれるすべてのコンテンツ（ボタンとラベルを含む）は、フォーカスの取得やクリックができません。
inert 属性は、ユーザー補助機能、特にフォーカス トラップを防ぐために特に役立ちます。
アクセシビリティが向上
ウェブ コンテンツのユーザー補助ガイドラインでは、フォーカス管理と、意味のある使用可能なフォーカス順序が定められています。これには、見つけやすさとインタラクティビティの両方が含まれます。以前は、aria-hidden="true" を使用して見つけやすさを抑制することができましたが、インタラクティビティがより困難になりました。
inert を使用すると、デベロッパーはタブオーダーとユーザー補助ツリーから要素を削除できます。これにより、見つけやすさとインタラクティビティの両方を制御し、より使いやすくアクセスしやすいパターンを構築できるようになります。
inert を要素に適用してユーザー補助機能を向上させるには、主に 2 つのユースケースがあります。
- 要素が DOM ツリーの一部であるが、画面外または非表示になっている場合。
- 要素は DOM ツリーの一部であるが、非インタラクティブである必要がある。
画面外または非表示の DOM 要素
ユーザー補助に関する一般的な懸念として、ドロワーなどの要素があります。ドロワーは、常にユーザーに表示されない要素を DOM に追加するものです。inert を使用すると、ドロワーのサブ要素が画面外にあっても、キーボード ユーザーが誤って操作するのを防ぐことができます。
非対話型の DOM 要素
アクセシビリティに関するもう一つの一般的な懸念は、UI デザインが可視または部分的に見えるものの、明らかに非インタラクティブである場合です。これは、ページの読み込み中、フォームの送信中、ダイアログ オーバーレイが開いている場合などに発生します。
最適なユーザー エクスペリエンスを提供するには、UI の状態を示し、ページのインタラクティブな部分にフォーカスを「トラップ」します。
フォーカス トラップ
フォーカス トラップは、優れた UI アクセシビリティの中心的なコンセプトです。スクリーン リーダーのフォーカスがインタラクティブな UI 要素にあり、要素によって操作が妨げられていることを認識できるようにする必要があります。また、不正なスクリーン リーダーがページ オーバーレイの背後でアクセスしたり、最初の送信処理中に誤ってフォームを送信したりすることを防ぎます。
inert を使用すると、検出可能なコンテンツのみにアクセスできます。これは、次のような場合に役立ちます。
- モーダル ダイアログ、フォーカス トラップ メニュー、サイド ナビゲーションなどの要素をブロックする。
- アクティブでないアイテムを含むカルーセルです。
- 該当しないフォームの内容（[請求先住所と同じ] チェックボックスがオンになっているのに、[配送先住所] 欄が消えて無効になるなど）。
- 一貫性のない状態の UI 全体を無効にする
inert 要素を視覚的に示す
デフォルトでは、サブツリーが不活性であることを示す視覚的表示はありません。DOM のどの部分がアクティブで、どの部分が不活かを明確にマークすることをおすすめします。
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
すべてのユーザーがページのすべての部分を同時に表示できるわけではありません。たとえば、スクリーン リーダー、小型デバイス、拡大鏡を使用しているユーザーや、特に小さなウィンドウを使用しているだけのユーザーでも、ページのアクティブな部分が見えず、不活性な部分が明らかに不活性でないと不満を感じる可能性があります。個々のコントロールでは、disable 属性を使用する方が適切です。
どのような操作や動きがブロックされるか？
デフォルトでは、inert はフォーカス イベントとクリック イベントをブロックします。支援技術に関しては、タブによる移動や見つけやすさもブロックされます。ブラウザでは、要素内のページ検索とテキスト選択が無視されることもあります。
inert のデフォルト値は false です。