HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
Firefoxで一番左または一番右のタブに一発で移動する方法
Firefoxで一番左または一番右のタブに一発で移動する方法を紹介します。 １．問題点 Firefoxでタブを数十とか開いている状態でその中間くらいのタブページ、またはピン留めしているタブのページを見ているときに、ピン留めしていない一番左または一番右のタブに移動したいことがあると思います。 私はマウスをタブにポイントしてマウスホイールを回してタブをスクロールさせているのですが結構面倒です。 ということで、一番左または一番右のタブに一発で移動する方法を紹介します。 ２．一番左のタブに移動する 一番左のタブに移動するには、「Ctrl+左からピン留めを含めて数えた数字」で移動できます。 ピン留めをしているタブが3つあれば、一番左のタブは「4」になるので、「Ctrl+4」で移動できます。 ピン留めのタブが8以上ある場合はこのテクニックが使えないので、まずピン留めしている一番右側のタブを選択してから
タブキー利用にも対応するフォームのちょっとした改善 (ユーザビリティ実践メモ)
最近のユーザ行動観察調査(ユーザビリティテスト)では、ウェブサイトの利用、マウスやキーボードの使い方に慣れたユーザも増えてきていると感じます。そこで今回は、ユーザのタブキー利用への対応について考えてみたいと思います。 フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか？タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。 タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。 フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。 <タグ名 tabindex=n> またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しまし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
