Webサイトにモーダルは必要か
これは備忘録であり、閉じた空間で話したことをオープンにしたいと思って公開している記事です。文字起こしでありません。 経緯としては、僕がモーダルの不満をツイートしたのがキッカケで、情報設計の分野の大先輩の稲本さんに、とりあえず不満を聞いてもらいつつ、いっしょに意見を整理させてもらった。 定義 ここでいうモーダルは、「モーダルダイアログ」のことで、他の操作を受け付けない状態、つまり文字通りモード状態になるもの。基本的に全面に被さるダイアログが現れてその他の操作はそれをを閉じるまで不可能になるインターフェイスと定義する。 Webアプリはわかる、しかしWebサイトのそれはわからん まず前提として、Webアプリケーションにおけるモーダルの有用性や必要性は理解できている。そもそもGUIが誕生した初期から存在していて、WindowsやmacなどのOSでも要所々々で今でも採用されているインターフェイスだ。
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
:focus-ringの代用としてwhat-inputを試す - yuhei blog
前回の記事で紹介した:focus-ringのポリフィルはイマイチだった。element.focus()で制御したときにいい感じにならないというつぶやきを見て知った。 具体的な例として、モーダルを閉じた後の挙動について考えたい。 モーダルを閉じた後は、フォーカスはモーダルを開いたボタンに戻るように実装する。そのために、button.focus()のようにしてフォーカスをスクリプトで制御する。この際、:focus-ringのポリフィルだとfocus-ringが有効になる処理が実行されず、キーボード操作をしていても適切なスタイルが表示されないことになる。 調べてみるとWhat Input?という似たライブラリがあった。ユーザーの入力端末を検出する機能があり、同じくfocus-ringの制御をすることが目的らしい。:focus-ringのポリフィルとは違い、入力端末の検出結果をhtml要素の属性な
outline: noneをやめよう、focus-ringを使おう - yuhei blog
次のようなスタイルが指定されたサイトを見かけることがある。 * { outline: none; } ボタンなどの要素をクリックしたときに、格好の悪いアウトラインが表示されてしまうのを打ち消したい、という意図だと思われる。 だが、上記のような指定をしてはいけない。サイトをキーボード操作することができなくなってしまうからだ。 クリックされたボタンはフォーカスされる。フォーカスされているということを視覚的にユーザーに伝えるためにアウトラインが表示される。キーボード操作するためには、現在のフォーカス位置が明示されている必要がある。上記のような方法によってフォーカス位置の手がかりを奪ってしまうと、キーボードユーザーにはそのサイトが利用できなくなってしまう。 とはいえ、マウスのみでサイトを利用するユーザーにとっては過剰な装飾に見えるかもしれない。マウスユーザーにとってはフォーカス位置が明示されている
キーボード操作によるインタラクションをチェックする | Accessible & Usable
公開日 : 2017年8月2日 カテゴリー : アクセシビリティ ウェブコンテンツは、障害などの事情で精緻なマウス操作ができない人 (キーボード操作に依存せざるを得ないユーザー) でも利用可能でなければなりません。たとえば、[Tab] キーでフォーカスを移動し [Enter] キーで実行する、上下矢印キーでページをスクロールしたりセレクトメニューを選択する、といった具合です。 このキーボード操作によるインタラクションは、画面を目にしたユーザーの期待 (予測) と合致している必要があります。システムの UI が、ユーザーにとって想定外なフィードバックを返してしまうと (あるいは十分なフィードバックをユーザーに返さないと)、ユーザーはコントロールを失ったような感覚になり、安心してウェブコンテンツを利用することができなくなります。 昨今は、リッチな (動きの演出の凝った) ウェブページが増えてき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高齢者でも使えるプロダクトUIの挑戦 / Designing User Interfaces for the Elderly