inert

概要

inert 属性は要素とそのすべての子孫を非インタラクティブにし、支援技術からも隠します。

対応ブラウザ

基本構文

<!-- モーダル表示時に背後のコンテンツを無効化 -->
<main inert>
  <p>この部分はクリック・フォーカスできません</p>
  <a href="#">リンクも無効</a>
</main>
<dialog open>
  <p>モーダル内容</p>
</dialog>

実務での使いどころ

• inert の活用

  要素とその子孫を非インタラクティブにする属性。モーダル背後のコンテンツ無効化に使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — inert