web-dev-qa-db-ja.com

デスクトップの「クリック可能」領域のチェックボックスサイズ

デスクトップのチェックボックスの「クリック可能」領域のサイズに関するガイドラインがあるかどうか疑問に思っています。私は開発者と話し合っていましたが、彼が製品をテストしているときに、チェックボックスを誤ってクリックすることがあります。そのため、既知のガイドラインがあるかどうか疑問に思いました。

enter image description here

上の画像では、暗い領域が現在のクリック領域です。マークされた領域の高さは24pxです。私自身、ミスクリックしたことはありません。テストしたユーザーも同様です。

タブレット/モバイルの場合、上記のチェックボックスは使用しません。モバイル/タブレットではサイズが大きく、多少異なります。モバイル/タブレットのチェックボックスは、最小タッチターゲットサイズなどのガイドラインに準拠しています。

これに関するテストを行ったことがあれば、ぜひ教えてください。

更新:クリストフの回答を通じて、マイクロソフトは 17pxのサイズ を提案していることがわかりました。しかし、彼らは理由に関する詳細を提供していません。おそらく誰かがAA基準の研究を見つけたでしょう。

5
Kevin M.

slugoliciousの答えは、WCAG 2.1で導入された達成基準2.5.5が44 x 44ピクセルの最小ターゲットサイズを定義するという意味で正しいです。ただし、実際には Understanding Success Criterion 2.5.5:Target Size を見て、この達成基準の目的を説明する必要があります(強調は私のものです)。

この成功基準の目的は、ユーザーが小型ハンドヘルドタッチスクリーンデバイスのコンテンツにアクセスしている場合でも、ユーザーが簡単にアクティブ化できる十分な大きさのターゲットサイズを確保することです。器用さ、または他の理由で小さなターゲットをアクティブにするのに問題があります。たとえば、マウスや同様のポインティングデバイスはこれらのユーザーにとって使いにくい場合があり、大きなターゲットはターゲットをアクティブにするのに役立ちます。

タッチは、粗い精度の入力メカニズムであるため、特に問題があります。マウスやスタイラスなどの入力を使用する場合、ユーザーは同じレベルの細かい制御ができません。 指はマウスポインターよりも大きく、一般に、タッチ/アクティブ化されている画面上の正確な位置のユーザーの表示を妨げます。 (...)

44ピクセルの高さは、Webやデスクトップのチェックボックスやラジオボタンで非常に大きく、これがSC 2.5.5がレベルAAAである理由の1つです。これはレベルです。 すべてのウェブサイトに推奨されない

一部のコンテンツについては、すべてのレベルAAA達成基準を満たすことができないため、サイト全体の一般的なポリシーとしてレベルAAAへの準拠を要求することはお勧めしません。

ただし、質問は、 desktop のチェックボックスのターゲットサイズについてであり、Webまたはモバイルデバイスについてではありませんでした。いくつかのオペレーティングシステムとウィジェットライブラリの開発者がデスクトップインターフェイスのガイドラインを作成しましたが、これらのガイドラインのいずれかでターゲットサイズの推奨事項を見つけることができませんでした。以下にいくつかの例を示します。

  • Appleのヒューマンインターフェイスガイドラインには、サイズや高さについては何も書かれていない Checkboxes に関するページが含まれています。同じことが[ラジオボタン]( https://developer.Apple.com/design/human-interface-guidelines/macos/buttons/radio-buttons )にも当てはまります。
  • Microsoft Apps for Desktop Apps には Check Boxes および Radio Buttons のセクションが含まれています。サブチャプター 推奨サイズと間隔 は、チェックボックスとそのラベルに 17ピクセルの高さを推奨しています。テキストには、これが推奨される正確な高さであるか、最小の高さであるかは記載されていません。 (さらに、これは画像でのみ言及されており、テキストや画像の代替テキストでは言及されていません。ターゲットサイズは、 Controls に関する一般的なページでは言及されていません。)
  • 基本OSヒューマンインターフェイスガイドラインには、 Selection Controls に関するセクションが含まれていますが、ターゲットサイズについては触れられていません。ただし、「 3チェックボックスを作成する方法、ラジオボタンをクリックしやすくする」 の記事へのリンクがあり、「ボタンゾーン」にラジオボタンとチェックボックスを配置することをお勧めします。基本的に、これは、ラベルが(適切に接続されたHTMLラベルのように)クリック可能であること、およびラベルとコントロールがホバー時に同じハイライト色を持っていることを確認することに帰着します。 (残念ながら、キーボードのフォーカスについては触れられていません。)
  • Java TM Look and Feel Design Guidelines、Volume 1)の Menus and Toolbars の章では、ターゲットサイズについても触れられていません。 Designing for Accessibility のセクションでは、フォントサイズについて言及し、視力の弱いユーザーも対象とするユーザビリティ調査の実行を推奨していますが、ターゲットサイズについては何も述べられていません。 Volume 2 このトピックもカバーしていません。
  • Implementing Java Swing User Interfaces に関するOracleのドキュメントは、ターゲットサイズについても何も述べていません(サイズに関するコメントは、より大きなコンポーネントを参照しています)。
6
Tsundoku

新しいWCAG 2.1の成功基準は " 2.5.5 Target Size "ですが、これはAAAに準拠しています。

ポインター入力のターゲットのサイズは、以下の場合を除き、少なくとも44 x 44 CSSピクセルです。
同等:ターゲットは、少なくとも44 x 44 CSSピクセルである同じページ上の同等のリンクまたはコントロールを介して利用できます。
Inline:ターゲットは文またはテキストのブロック内にあります。
ユーザーエージェントコントロール:ターゲットのサイズはユーザーエージェントによって決定され、作成者によって変更されることはありません。
必須:ターゲットの特定のプレゼンテーションは、伝達される情報に不可欠です。

10
slugolicious