webアクセシビリティとしてのフォーカス制御について考える

アクセシビリティ対応としてのフォーカス制御について。

モーダル画面が表示されている時のバックグラウンドや、スライダーで非表示(カレントではない)の要素に対するフォーカス制御について考え中。

答えは出てないですが、調べたメモ(ほぼリンク集です)

フォーカスってそもそもなんだろう。いつ発生するのだろう。という理解がしやすかった。
フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス

tabindex属性で達成できず、ひたすら頭を悩ませるキッカケになった、子要素の「タブナビゲーション」に対して解決する手段。
HTMLElement.inert - Web APIs | MDN

フォーカスイベントや支援技術からのイベントなど、要素のユーザー入力イベントをブラウザに「無視」させるプロパティです。ブラウザは、要素内のページ検索とテキスト選択を無視する場合もあります。

ということで、今回求めている要件にジャストフィット。
なんですが、各ブラウザ見事に非対応。つらい。
“inert” | Can I use… Support tables for HTML5, CSS3, etc

Living Standardでも

この節は、”inert”という名前のいかなるコンテンツ属性を定義または作成しない。

って言い切っているので、仕様化は止まっているよう。
HTML Standard 日本語訳

polyfillはいくつかありそう。

WICGのpolyfillがあるが、IE11対応する場合は芋づるで別のpolyfillが必要そう。
GitHub - WICG/inert: Polyfill for the inert attribute and property.

chromeも出している。
READMEの末尾でWICGとの比較についてコメントされてますね。こっちの方が現実的かも。
GitHub - GoogleChrome/inert-polyfill: Polyfill for the HTML inert attribute

JSでフォーカス制御を積極的に行っている例。
Modals | Accessibility Guidelines

こちらも同じく。
キーボードトラップっていうんですね。
tabindex の使用 | Web | Google Developpers

早くinert属性が有効になって欲しいですが、なかなか現実味が帯びない。
記事自体も最近のものがないので、議論がストップされているように感じる。

polyfillが一番かと思いつつ、全ブラウザ非対応なのでちょっと躊躇しますね。

モーダルのような、フォーカス対象を限定する場合はキーボードトラップで実装するのが良さそうか。
一部分だけフォーカスの対象外としたい場合はどうする？tabindexとpointer-eventsをちくちく指定していくしかないのかな。