inert 属性

Emma Twersky

inert 属性はグローバルな HTML 属性で、要素のユーザー入力イベント（フォーカス イベントや支援技術のイベントなど）の削除と復元を簡素化します。

無効は、showModal を使用してユーザーが選択して画面から閉じるダイアログを開く場合など、ダイアログ要素のデフォルトの動作です。<dialog> を開くと、ページの残りの部分が非アクティブになります。たとえば、リンクをクリックしたり、タブキーで移動したりできなくなります。

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>

ここでは、button2 を含む 2 番目の <div> 要素で inert が宣言されているため、この <div> 内に含まれているコンテンツ（ボタンやラベルなど）はすべてフォーカスを受け取れず、クリックもできません。

inert 属性は、特にフォーカス トラップを防ぐために、ユーザー補助に特に役立ちます。

ユーザー補助機能の向上

Web Content Accessibility Guidelines では、フォーカス管理と、合理的で使いやすいフォーカス順序が求められます。これには、見つけやすさとインタラクティビティの両方が含まれます。以前は、aria-hidden="true" で検出を抑制できましたが、インタラクティブ性は低下します。

inert を使用すると、デベロッパーはタブオーダーとユーザー補助ツリーから要素を削除できます。これにより、検出可能性とインタラクティビティの両方を制御し、より使いやすくアクセスしやすいパターンを構築できます。

inert を要素に適用してユーザー補助を強化する主なユースケースは 2 つあります。

• 要素が DOM ツリーの一部であるが、画面外または非表示の場合。
• 要素が DOM ツリーの一部であるが、非インタラクティブにすべき場合。

画面外または非表示の DOM 要素

ユーザー補助に関する一般的な懸念事項の一つは、引き出しなどの要素です。引き出しは、ユーザーに常に表示されない要素を DOM に追加します。inert を使用すると、引き出しのサブ要素が画面外にあるときに、キーボード ユーザーが誤って操作できないようにすることができます。

非インタラクティブ DOM 要素

ユーザー補助に関するもう 1 つの一般的な懸念事項は、UI デザインが完全に表示されているか、部分的に表示されているものの、明らかにインタラクティブではない場合です。たとえば、ページの読み込み中、フォームの送信中、ダイアログ オーバーレイが開いている場合などです。

ユーザーに最適なエクスペリエンスを提供するには、UI の状態を示すとともに、インタラクティブなページ部分にフォーカスを「トラップ」します。

フォーカス トラッキング

フォーカス トラップは、優れた UI ユーザー補助の中心的コンセプトです。スクリーン リーダーのフォーカスがインタラクティブな UI 要素に向けられていることと、要素がインタラクティビティをブロックしている状況を把握する必要があります。これにより、不正なスクリーン リーダーがページ オーバーレイの背後に隠れたり、最初の送信の処理中に誤ってフォームが送信されたりするのを防ぐことができます。

inert を使用すると、検出可能なコンテンツのみにアクセスできるようにすることができます。次の場合に役立ちます。

• モーダル ダイアログ、フォーカス トラップ メニュー、サイドナビゲーションなどのブロック要素。
• アクティブでないアイテムを含むカルーセル。
• 該当しないフォーム コンテンツ（[請求先住所と同じ] チェックボックスがオンになっている場合、[配送先住所] フィールドがフェードアウトして無効になるなど）。
• 一貫性のない状態の UI 全体を無効にする。

inert 要素を視覚的に表す

デフォルトでは、サブツリーが非アクティブであることを視覚的に示すものはありません。DOM のアクティブな部分と非アクティブな部分を明確に区別することをおすすめします。

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

すべてのユーザーがページのすべての部分を一度に表示できるわけではありません。たとえば、スクリーン リーダーや小型のデバイス、拡大鏡を使用しているユーザーや、特に小さなウィンドウを使用しているユーザーであっても、ページのアクティブな部分を見ることができず、不活性セクションが明らかに不活性化されていなければ、不満を抱く可能性があります。個々のコントロールの場合は、disabled 属性のほうが適切でしょう。

ブロックされる操作と移動

デフォルトでは、inert はフォーカス イベントとクリック イベントをブロックします。支援技術の場合、タブ移動と検出もブロックされます。また、ブラウザは、要素内のページ検索とテキスト選択を無視することもあります。

inert のデフォルト値は false です。