interactivity

概要

HTML属性のinertと同様の効果をCSSで実現する機能です。不活性状態の要素はフォーカスやクリックが無効化され、テキスト選択やブラウザ内検索の対象からも除外されます。モーダルダイアログの背景コンテンツを無効化する場合や、段階的なフォーム入力で未到達のセクションを制御する場合に有用です。

対応ブラウザ

基本構文

.modal-backdrop {
  interactivity: inert;
}
.step:not(.active) {
  interactivity: inert;
  opacity: 0.5;
}

実務での使いどころ

• モーダル背景のインタラクション無効化

  モーダルダイアログ表示時に背景コンテンツを不活性化し、モーダル内のみ操作可能な状態を作ります。

注意点

アクセシビリティ

• 不活性化された要素がスクリーンリーダーからも適切に除外され、フォーカス順序に含まれないことを確認してください。

参考リンク

• MDN Web Docs — interactivity