inert
inert 属性は要素とそのすべての子孫を非インタラクティブにし、支援技術からも隠します。
概要
inert 属性は要素とそのすべての子孫を非インタラクティブにし、支援技術からも隠します。
対応ブラウザ
デスクトップ
Chrome 102+
Edge 102+
Safari 15.5+
Firefox 112+
モバイル
Chrome Android 102+
Safari iOS 15.5+
Firefox Android 112+
基本構文
HTML
<!-- モーダル表示時に背後のコンテンツを無効化 -->
<main inert>
<p>この部分はクリック・フォーカスできません</p>
<a href="#">リンクも無効</a>
</main>
<dialog open>
<p>モーダル内容</p>
</dialog> 実務での使いどころ
-
inert の活用
要素とその子孫を非インタラクティブにする属性。モーダル背後のコンテンツ無効化に使用。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。