HTML でモーダル UI を作るときに気をつけたいことを読んだ

HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA

読んだ。

あー裏側操作できるやつ見たこといっぱいある……と思って読んでウッとなった。

スタイルoverflow: hiddenでスクロールを固定していても、iOS Safariでは以下のような特定のタイミングで裏側のコンテンツがスクロールできてしまいます。

iOS Safariはなかなか強敵だなあ……。

画面下部のタブバーの表示が切り替わるタイミング

最前面のコンテンツを上下どちらかにスクロールしきった後に、もう一度スクロールしたタイミング

なるほどね。

スクロール対象をスクロールしきったあとに微調整とかせねばならないのか……。

キーボード操作を行うと、モーダルの裏側のコンテンツにフォーカスがあたってしまう問題があります。モーダルダイアログの表示中は背面が操作できないような表示になりますが、Tabキーでフォーカスを移動できています。モーダルダイアログの表示中に裏側のボタンや入力欄の操作ができるため、意図しない動作の起きるリスクが考えられます。

モーダルダイアログの実装においては、z-indexの重なり順の対策もかねて<body>要素の末尾に表示用の要素が置くことあります。その実装をすると、モーダルダイアログの表示直後にフォーカスがすぐに当たらないという現象も発生します。

わりと重症だった。

<dialog>要素はブラウザ標準の仕様です。<dialog>要素で実装すると、キーボードフォーカスやスクリーンリーダーの挙動も手軽にケアできます。<dialog>要素は主要なブラウザの最新版であれば利用可能です。ただし、Safari 15.4以上（2022年3月リリース）で利用可能のため、それ以前のバージョンのブラウザを考慮する場合は別の方法を検討する必要があります。

dialog 要素を使うのがよさそうな感じかな。

ダイアログはライブラリを使うことがほとんどだったけど、 dailog 要素もちゃんと調べないとな。