オーバーレイは、ユーザーの期待に反するようなかたちで閉じるようになっていることがよくある。 Accidental Dismissal of Overlays: A Common Mobile Usability Problem by Raluca Budiu, Sana Behnam and Kate Moran on September 18, 2022 日本語版2023年2月7日公開 モバイルでは、オーバーレイはユビキタスなUI要素になっていて、Cookieの許可からチャットバブル、クーポンの提供、メールマーケティング購読の提案などの迷惑なポップアップ以外にも、ナビゲーションメニューやボトムシート、商品詳細ページ、アプリ内ブラウザなどに利用されている。 モバイルオーバーレイの多くは、ページの一部のみを占めるもので（部分オーバーレイ）、背景にコンテンツを部分的に表示することができるように

Web Platform Dive into the web platform, at your pace.

In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try the demo and view the source! Demonstration of the mega and mini dialogs in their light and dark themes. If you prefer video, here's a YouTube version of this post: Overview The <dialog> element is great for in-page contextual information or action

公開日 : 2021年6月6日 (2021年6月7日 更新) カテゴリー : アクセシビリティ 先の記事「折り畳まれたナビゲーションメニューの展開 (オーバーレイではなくインレイで)」を書く過程で、オーバーレイで提示されるモーダルウィンドウのアクセシビリティについて改めて調べていたところ、aria-modal という属性が気になりました。aria-modal とは、2017年に勧告された WAI-ARIA 1.1 から追加されたプロパティで、あるコンテナ要素に aria-modal="true" という属性が適用されている場合、その要素がモーダルであることをスクリーンリーダーなどの支援技術に示し、それ以外のコンテンツの利用を排除する (インタラクション可能な範囲を、モーダルのコンテンツに限定する) というものです。(参考 : aria-modal の定義 (WAI-ARIA 1.1) /

こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptのテクニックを紹介します。 Prevent Page Scrolling When a Modal is Open 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 簡単なことから始めましょう スマホの場合 この問題を解決するにはJavaScriptが必要 JavaScriptで問題を解決する はじめに モーダルを開いて、スクロールして、モーダルを閉じます。すると、そのページはモーダルを開いた時とは別の場所にスクロール

これまでにモーダルウィンドウのメルマガ登録フォームを見たことがありますか？　世の多数のサイトで使われているので、おそらくあるでしょう。多くのサイトで使用されるにはそれなりの理由がありますが、同時にその使用を再考すべき理由もあります。 モーダルウィンドウによるメルマガ登録はコンバージョン率が高いため、多くのサイトで導入されています。サイトにアクセスするすべてのユーザーがまずモーダルウィンドウの対応をしなければならないためです。この操作をする人数が増えるほど、より多くのメールアドレスを入手できるようになります。 多くのサイトがメール購読者数欲しさに、あまり深く考えずにモーダルウィンドウのメルマガ登録フォームを設置します。しかし、これはすべての購読者に価値あるものではなく、運営側は幻想に惑わされているのです。 コンバージョン率の幻想 多数のメルマガ購読者に誰もが大喜びをするでしょう。しかし、その

はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いながらも、私は Apple 製品を追いかけてきた。 どうして？ ... 実はその秘密は既に明らかになっている。 それは、モードレスだからだ。 直感的だとか、シンプルだとか、一貫性があるとか、そういったものは表出された一部にすぎない。 この秘密は、 今から 9 年も前にインターネットに公開されたテキストにあっさり書かれている。ソシオメディアの上野学

この記事は、Web Accessibility Advent Calendar 2017 3日目の記事です。 はじめに モーダルなダイアログを開いたときには、ダイアログの外側の要素は操作できないようにしなくてはなりません。マウス操作だけではなく、キーボードなどによるフォーカスもダイアログの外側にあたらないようにしなければなりません。 この記事では、WAI-ARIA Authoring Practiceの実装をもとにフォーカス管理の方法について学んだTipsをメモしておきます。 WAI-ARIA Authoring Practice -Dialog(Modal) github 実装の基本方針 ダイアログの外側にフォーカスがあたったことを検出して、フォーカスを適切な位置に戻します。ダイアログの外側にフォーカスがあてるには、例えば以下のような操作が考えられます。 A) ダイアログの先頭の要素にフ

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I’d say. There’s quite a few considerations and a few tricky things to get just right. Let us count the ways. Where in the DOM? I typically plop a modal’s HTML before the closing </b

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0

公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter. Today we are going to show you how to make a motion blur effect and apply it to regular JS or CSS animations of HTML elements. Motion blur is a technique widely used in motion graphics and animation in general to make movement seem more smooth and natural. Motion blur is the apparent streakin

モーダルビューを「閉じる」ボタンの位置は右に置くべきか左に置くべきか。iOSにおいてはナビゲーションバーの右と左の2択であるため、逆に迷ってしまいがちなのかもしれません。 よくある話としては「設定ボタンがナビゲーションバーの左にあるのなら、同じように左側に閉じるボタンを配置するべきではないのか…」といったことをよく聞きますが、トリガーとなるボタンの位置はあまり関係なく、その後のモーダルビューでの内容や一貫性によって判断する必要があります。 モーダルとは ボタンの位置を考える前に、まずはモーダルとはどういったものかを紹介します。アプリケーションでのモーダルはユーザーに行動を制限し、特定のタスクに集中させるモードです。もちろんアプリケーションという意味では、ホームボタンを押したりマルチタスクにより他のアプリケーションを使うことができるため完全な制限ではありませんが、現在使用中のアプリケーション

Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合