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

ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、

[mayumayu_nimolove]

もうダルいから全部ライブラリでいいと思う

[eos2323]

モーダルは一見かっこいいけど、使うほどUXも保守性も下げてる気がしてならない

[matarillo]

原則は「HTMLでモーダルUIを作るな」なんだということを最初にでかでかと書くべき事案。もし<dialog>を使うなら、スクロール停止だのなんだの余計なことをせず、各ブラウザの挙動差も無視すること。

[misarine3]

気軽にモーダル指定してくるデザイナーさんに100回読んでほしい。その挙動は本当に必要ですかと。

[otchy210]

IE が死んだので素直に <dialog> 使えばよろし。https://caniuse.com/?search=%3Cdialog%3E

[fujibay1975]

モーダルはなるべく使わないほうが良い。

[nakag0711]

モーダルはUX上百害あって一理なし。はてブアプリからTwitter開いた時とかもう…

[eartht]

まぁ自作はしたくないわなー、ライブラリが良い。けど、その選定も大変。地味にedge対応って書かれたモーダルが少なかったりして、客の要望を満たさなかったりする。ｷｰ！

[shields-pikes]

こんな原始的な実装をしてるのは自分達だけなのでは？もっと楽な方法があるのでは？疑惑が払拭されてよかった。とはいえ、ページ遷移させずにひとつのコンテンツだけに集中してほしいタイミングってあるからなー。

[lnimroder]

モーダル実装、alert()とかconfirm()みたいにブラウザ側の機能できないのかなこれ

[waicode]

モーダルは特にスマホで罠が多い。iframe内でモーダル表示だと画面サイズ取得できなくて中央ピッタリが厳しかった記憶。

[tockri]

昔window.showModalDialog()というAPIがあってな…ヨボヨボ

[spark7]

<dialog>以外の方法はバッドノウハウになりそうね。手間ばかりかかってろくなことない。/ iOS Safariは新しいIEな感じ。

[buhoho]

<dialog>便利だなー

[ultimatebreak]

モーダルはマジでめんどくさい

[send]

iOS Safari 15.4 以降だと scroll-behavior 使えるので、それでいいのでは

[nelpesica]

[]

[miruto]

わかるー。モーダル作るの面倒くさいんだよね😇

[enemyoffreedom]

「2022年現在は<dialog>要素を使いつつ、iOS Safariのスクロール対策は自前のJavaScript実装がよさそうです」 何だかんだ面倒くさいのでFW・ライブラリに頼りたいところ

[securecat]

dialogで実装してiOS Safariに関してはSafariの頑張りに委ねるで良いと思う。設計側としては、モーダル外の操作によって主動線が失敗しても致命傷にならない時に限りモーダルを使う。というかそもそもモーダルを使わない。

[circled]

escキーで閉じない。全部キーボード操作だけで完結出来ない。アクセシビリティ(目の見えない人用に読み上げ機能でスムーズに動作するか？とか)が下がるか、そもそも無い。みたいなハードルがどんどん上がる昨今。

[nebos]

“「スクロールの制御」「フォーカスの制御」の両方をケアしないと良いモーダルUIの挙動にはなりません”

[tofu-kun]

難しいよな

[strawberryhunter]

まあSafariが多少おかしいのはこの際無視するよね。

[nicht-sein]

Safariが現代のIEと化しているのがよくわかる話だなぁ

[Cherenkov]

ライブラリ使えー

[kvx]

フォーカスループ作ったな？じゃあ次はモーダルinモーダルの対処な。モーダル内のツールチップのESCキー対応もな。/全部ブラウザの機能でどうにかするべき。

[emj1025]

iOS safari勘弁してほしい