inert 属性

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

対応ブラウザ

  • Chrome: 102。
  • Edge: 102.
  • Firefox: 112。
  • Safari: 15.5。

ソース

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

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 属性は、特にフォーカス トラップを防ぐために、ユーザー補助に特に役立ちます。

ユーザー補助機能の向上

Web Content Accessibility Guidelines では、フォーカスの管理と、合理的で使いやすいフォーカス順序が求められます。これには、見つけやすさとインタラクティビティの両方が含まれます。以前は、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;
}

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

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

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

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