inert 属性

Emma Twersky

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

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

inert 属性を使用すると、他の要素に対して同じ動作を実現できます。

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 属性はユーザー補助の場合に便利です。 特にフォーカスのトラッピングを防止できます

アクセシビリティの向上

ウェブ コンテンツ アクセシビリティ ガイドラインでは、フォーカス管理と、適切で使いやすいフォーカス順序を規定しています。これには、見つけやすさとインタラクティビティの両方が含まれます。以前は 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 です。