inert 属性とフォーカス
目次
概要
なんとなく使ったけどあまり分かっていないシリーズ inert 属性について調べながら改めて使ってみた。
inert 属性とは
ブラウザーがその要素を無視することを示すためのHTMLの論理属性
inert は配下の各要素の不活性化を行う
- フォーカス移動
- クリックイベント
- アクセシビリティツリーからの除外
デモ
分かったこと
inert配下の特定要素を活性化することはできないinert要素は見た目が変化しない（不活性/活性の見た目をCSSで作る必要がある）- MDN では考慮点として挙げられている
inert要素はページ内テキスト検索に引っかからない（Mac Chromeの場合）inert以外で要素の完全な非活性化を行おうとすると細かい制御が必要tabindex="-1"でも JavaScript のfocus()ではフォーカス可能など
- 一般的には
inertはコンテンツのセクションなどに使用され、フォームコントロールを個別に非活性するにはdisabled属性を使用するのが望ましい
所感
基本的にはケースに応じて使うべきときは有用だが、支援技術利用者と非利用者によって得られる情報にギャップが生じないようにデザイン、実装するといった注意点も把握できた。
<dialog> のおかげで必要だなと考えるケースも多い訳ではないが、意外となんでも使ってOKではないため考慮点を踏まえながら使用していきたい。