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

ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。

ics.media
Related Topics: Web Standards / Browsers HTML
5 comments
  • 池田 泰延
    @clockmaker

    dialog要素を使えば、モーダルUIのアクセシビリティ対応の対策にもなります。

    もう少し時代が進めばdialog要素が標準的になるのでは。

    HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA ics.media/entry/220620/
    #postdev

  • ものえおさむ
    @osamum

    説明がめちゃくちゃ丁寧でわかりやすいし、なにしろページが市販されてる書籍と変わらないクォリティ。変な広告も出ないし、こんなの無料で読めるってすごい時代だ。

  • 池田 泰延
    @clockmaker

    簡単そうにみえて実は気にすることの多いUI。
    dialog要素が登場したことでだいぶ作りやすくなりました。

  • 池田 泰延
    @clockmaker

    HTMLでモーダルUIを「ちゃんと」実装するのは大変。

    頻繁に見かけるUIだから簡単に思われがちですが、フロントエンジニアの知られざる苦労が多いです。

    ・モーダルの裏側までキーボードでフォーカスされる問題

    ・ハンバーガーメニューの後ろ側もスクロールできる問題
    ics.media/entry/220620/ #CSS