web-dev-qa-db-ja.com

アクセス可能なカスタムスクロールバー?

カスタムスクロールバーに関する一般的なコンセンサスは、それらが全体的なユーザーエクスペリエンスにいくらか有害であるように思われますが、私のコントロールを超える権限は、それらの実装が必須であることを示唆しています。スクロールバーに標準のアクセス可能な機能(簡単に選択できる十分な幅、簡単に気付くほど高いコントラストなど)を提供する以外に、簡単に使用できるカスタムスクロールバーの留意点として、どのような使いやすさ機能がありますか?

10
Chris

古き良きジェイコブ・ニールセン Scrolling and Scrollbars

これらの成功したデザインのそれぞれで、ユーザーはスクロールバーに簡単に気づき、問題なくそれらを使用しました。 2つの図とテストした他のいくつかのデザインを比較することにより、優れたスクロールバーの4つの要件を決定しました。

  • 長方形の谷の形をした実際のバーを使用します。できれば、背景と対照的な色を使用してください。
  • 上部と下部に矢印を表示します。
  • スライダー(「親指」または「エレベーター」と呼ばれることもあります)を、できればトラフと対照的な色で含めます。スライダーの位置は、全領域に対する可視領域の位置を示す必要があります。これにより、スクロールする必要があるコンテンツの量を確認できます。
  • ユーザーがスクロールできるようにする
    • トラフをクリックして、
    • 矢印をクリックして
    • スライダーをドラッグし、
    • マウスのスクロールホイールを使用します。

スクロールバーは簡単に修正できます。実際、作業が少なければ少ないほど、スクロールバーは良くなります。独自のスクロールバーを設計するのではなく、組み込みのスクロールバーを使用すると、ほとんどの場合、使いやすさが向上します。

5
icc97

簡単に使用できるカスタムスクロールバーで注意すべきユーザビリティ機能とは

重要なのは、入力デバイスに関係なく使用できることですか?キーボード、マウス、マウスホイールでタッチでスクロールできますか?支援技術(画面読み上げソフトウェアなど)の妨げになりますか?

しかし、結局のところ、すでにご存じのように、これはおそらくすべきではないことです。これは、サイト専用のカスタムWebブラウザーを作成するように依頼するクライアントに似ています。あるレベルでは愚かで、別のレベルでは傲慢です。しかし、あなたはすでにその戦いを戦ったように聞こえます。

4
DA01

重要なことは、標準のOSが提供するスクロールバーのように、可能な限り動作することです。 DA01が言及したように、ページアップ/ページダウン、矢印キー、スペースバーを含むすべての通常の入力に応答する必要があります。また、スクロールはOSと同じ速度で行う必要があります。

notでカスタムスクロールバーを作成する最大の理由の1つは、特定のプラットフォームでは非標準に感じやすく、重要なテストが行​​われるためです。これの程度を理解し、それが問題であるかどうかを知るために必要です。そして、タッチUIを適切にサポートすることは突然複雑になります。タッチプラットフォームを検出し、カスタムスクロールバーを無駄にしているスペースを削除する必要があります。

1
obelia