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

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

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

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

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

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

  • 池田 泰延
    @clockmaker

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

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

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

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