inert属性の使いどころ
UI開発者 加藤inert属性はある要素とその要素のサブツリーに含まれる全ての要素を不活性にするための属性です。不活性とは簡単に言えば「クリックできない」「フォーカスできない」「選択できない」「編集できない」状態を指します。
また、HTML Standardでは「ページ内検索でも無視される場合がある」と記載されています。手軽に使える属性である一方、不用意に使うと思わぬところに影響がでる可能性があります。そこで今回はユースケースとinert属性を使う際の注意点をいくつかご紹介します。
ちなみに、似たような属性としてdisabled属性がありますが、disabled属性はinput要素やbutton要素などのフォームコントロール要素単体、およびフォームコントロール要素をグループ化するためのfieldset要素でのみ有効な属性です。
ユースケース
inert属性はもともとdialog要素の仕様の一部として実装が進められていました。
コンテンツの上にかぶさる形でダイアログを表示する場合は、ダイアログの外にあるコンテンツは操作できないようになっているべきと、ARIA Authoring Practices Guide (APG)の「Alert and Message Dialogs」にも記載されています。
そのため、一括で要素を不活性にできるinert属性とdialog要素はセットで検討されていました。
しかし、その後ダイアログ以外のユースケースに関する議論が進み、現在はinert属性単体の仕様となっています。では、ダイアログ以外のユースケースとはいったいどんなものが考えられるでしょうか。
オフスクリーン要素の不活性化
1つは、スライダーやカルーセルのようなUIでDOMツリー上には存在しますが画面の外にはみ出して見えていない要素に対してinert属性を付与するケースです。
画像を表示するだけのスライダーであれば、スライドの中にフォーカス可能な要素がないため特に考慮する必要はなさそうですが、スライドの中にリンクなどが含まれている場合はTabキー操作によって、画面上では見えていない要素に対してフォーカスがあたることになります。
これまではフォーカスがあたらないようにするには、tabindex="-1"を指定する必要がありましたがinert属性を使えば、リンクが複数ある場合も一括で制御できるため処理もシンプルになるでしょう。
選択肢によって特定のエリアごと不活性にする
例えばECサイトでは、銀行振込やクレジットカード、電子決済などユーザーが使いたい決済方法によって、その後に入力する内容を変えたいことがあります。
もちろん不要な入力フォームにはdisplay:noneを指定して非表示にしておけばフォーカスがあたることもなく、不用意に入力される心配もありません。しかし入力フォームが見えていればあとで入力しなくてはならない情報をユーザーが予測できるため、より分かりやすくなるかもしれません。
画面上では見せておきたいけど一括で不活性にする、といったこともできるのがinertの強みです。
注意点
inert属性を使う上でいくつか注意点があります。
1つ目はどこからどこまで不活性なのかがユーザーに伝わるスタイルを用意することです。フォームコントロール要素に対してdisabled属性を付与すると、ユーザーエージェントスタイルシートが適用され操作できないような見た目になりますが、inert属性はサイトを提供する側が専用のスタイルを用意する必要があります。
2つ目はinert属性がついている要素に含まれる子要素のうち、部分的に活性にするといったこともできないことです。複数の子要素を含む要素を不活性にする際は注意が必要です。
3つ目はinert属性がついている要素はaria-hidden="true"aria-hidden="false"
今回紹介したような属性の特性を理解した上で意図せずアクセシビリティを損ねないように使っていきましょう。
（6/3追記：aria-hidden="false"と記載していましたが、trueが正しい値でした。失礼致しました。ご指摘ありがとうございました。）
おわりに
ミツエーリンクスではUI開発者（フロントエンドエンジニア）を募集しています。
Web標準技術に興味のある方、アクセシビリティや表示パフォーマンスの改善に取り組みたい方、大規模なサイトの設計・実装にチャレンジしたい方などなどいらっしゃいましたら、ぜひ採用サイトからご応募ください！