モーダルウィンドウを閉じた瞬間、Chromeの開発者ツールのコンソールに黄色い警告が出る。Bootstrapでも、Angularでも、Ionicでも、同じ文面が出てくるおなじみのものです。検索すると一行で黙らせる方法がすぐ見つかるので、深く考えずに入れてしまった経験がある方も多いのではないでしょうか。
CSS-Tricksに、この警告は正しく、よく出回っている直し方のほとんどは使う人を困らせる方向に働いている、と正面から論じた記事が掲載されました。表示の崩れとして目に見えない不具合だけに、制作の現場では見落としやすい話です。
警告が伝えているのはフォーカスの置き去り
問題の中心は、aria-hidden という属性の性質にあります。この属性は要素をスクリーンリーダーなどの支援技術から見えなくしますが、キーボードでのフォーカス移動からは外しません。つまり、読み上げの対象からは消えているのに、Tabキーでは到達できる、という食い違いが起こり得ます。
モーダルを閉じる処理でよくあるのが、先に外側の枠へ aria-hidden を付けてフェードアウトを始め、アニメーションが終わってから元のボタンにフォーカスを戻す、という順番です。この間、閉じるボタンにはまだフォーカスが残っています。記事によると、Chromeはこの状態を見つけると指定された非表示を実際には適用せず、読み上げ側に中身を見せたままにしたうえで警告を出しているとのことです。コンソールの表示はお知らせではなく、書いたマークアップをブラウザが上書きしたという報告だと捉えたほうが実態に近いようです。
よく見かける直し方が使う人を置き去りにする
検索上位によく出てくるのが、閉じる処理の中で document.activeElement.blur() を呼ぶ一行です。確かに警告は消えます。ただ、フォーカスはどこにも移らず、ブラウザはページ全体の body に落とします。マウスで操作している人には何も起きていないように見えますが、キーボードやスクリーンリーダーで操作している人は、読み上げが途切れたうえに、次のTabでページの先頭からやり直すことになります。記事では、フォーカスの順序に関するWCAGの達成基準2.4.3に反する状態だと指摘しています。
ほかにも、setTimeout などで処理を少し遅らせる方法、aria-hidden 自体を取り除く方法、Radixやshadcnでモーダル扱いそのものを外してしまう設定などが紹介されていますが、いずれも警告を静かにする代わりに別の不都合を生むとされています。遅らせる方法は処理の重い端末で失敗が不定期に出るようになり、属性を外す方法はモーダルを開いている最中に背後のページを操作できてしまいます。
筆者自身もこの一行を入れて出荷し、後日の利用者テストでスクリーンリーダー利用者がページの先頭から延々とTabを押して元の場所へ戻る様子を見て、ようやく意味に気付いたと書いています。自動のアクセシビリティ検査も静止した状態のマークアップを見るため、この種の順番の不具合は通ってしまう、という指摘は制作側として耳が痛いところです。
閉じるときの手順を並べ替える
記事が示す正しい直し方は、新しい部品を足すことではなく、閉じる処理の順番を入れ替えることです。要点は、隠す領域からフォーカスを先に出してから隠す、の一点に集約されます。手順としては次の流れになります。
- 開いている間に背後のページへ付けていた
inertを先に外す - モーダルを開いたボタンへ、その場でフォーカスを戻す
- 閉じかけているモーダル自体には
aria-hiddenではなくinertを付け、クリックも受け付けないようにしてからフェードアウトさせる - アニメーションが終わった時点で要素を取り除く
inert は読み上げの対象からも、フォーカス移動からも、クリックからも要素を外す属性なので、フェード中の抜け殻を安全に扱えます。また、開いたボタンそのものは開く処理の時点で記録しておく必要があります。フォーカスをモーダルの中へ移したあとでは、どこから来たのかが分からなくなるためです。
加えて、動きを減らす設定の利用者のようにアニメーション自体が走らない場合、終了を知らせるイベントが来ないまま要素が残り続けるという落とし穴も挙げられています。削除した行のメニューから開いたモーダルのように、戻り先のボタンがもう無い場合に備えて、代わりの戻り先を用意しておくことも勧められています。
新しく作るなら標準のdialog要素が近道
記事の冒頭で真っ先に勧められているのが、HTML標準の dialog 要素を showModal() で開く方法です。この場合、フォーカスの受け渡しや背後の操作不能化はブラウザが引き受けてくれるため、今回のような不具合はほぼ起きなくなるとされています。Bootstrapも次の大きな版で自前の処理をやめ、この標準の仕組みに寄せたと紹介されています。
中小企業のサイトでも、お問い合わせの確認画面や画像の拡大表示など、モーダルは意外と多く使われています。既存のライブラリをすぐに入れ替えられない場合でも、閉じる処理でフォーカスがどこへ戻るかをキーボードだけで一度確かめてみる価値はありそうです。コンソールをきれいにすることが目的になっていないか、改めて見直すきっかけになる記事でした。
