インタラクティブコンポーネント間の距離

Silktide は、ページ上のボタン、リンク、フォームコントロールのサイズと間隔を測定します。小さなコントロールが近接して配置されていると、誤って押しやすくなります。そのため、それぞれを少なくとも 24 × 24 ピクセルにするか、周囲に十分な空白を設ける必要があります。

重要な理由

小さなボタンは誰でも押し損ねる可能性があります。しかし、震えや関節炎がある人、または細かい運動制御が難しい人にとって、コントロールが密集したページは本当に使いにくいものです。間違ったリンクをタップしたり、間違ったフォームを送信したり、完全に諦めてしまったりする可能性があります。この問題はタッチスクリーンで最も深刻になります。指先はマウスポインターよりもはるかに正確さに欠けるためです。

これはの達成基準 2.5.8（ターゲットのサイズ（最小））であり、WCAG 2.2 のの要件です。そのため、多くの組織が目標とする適合レベルの一部となっています。

修正方法

各インタラクティブ要素を少なくとも 24 × 24 ピクセルにします。min-width と min-height を設定するか、パディングを追加するだけで十分な場合が多くあります。
または、各コントロールを中心とした 24 × 24 ピクセルの領域が隣接するコントロールと重ならないよう、コントロール間にスペースを追加します。ほかに近接するものがなければ、より小さいターゲットでも問題ありません。
一般的にサイズが小さく、密集して配置されるアイコンボタン、ページネーションリンク、ソーシャルメディアアイコンには特に注意してください。

/* 問題: 16px のアイコンボタンが互いに接触している */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* 修正: クリック可能な領域を少なくとも 24x24 に拡大する */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Silktide によるテスト方法

すべてのページについて、モバイル版とデスクトップ版の両方をテストします。結果は両者で異なる場合があります。
インタラクティブ要素（リンク、ボタン、フォームフィールド、イメージマップ領域）を見つけます。
通常は表示されない要素（用に画面外に配置されたコンテンツなど）と、チェック対象から除外した要素は無視します。
幅が 24 ピクセル以上かつ高さが 24 ピクセル以上の要素は合格とします。
文章やテキストブロック内に配置されたコントロールは、WCAG でこのルールの対象外とされているため無視します。
残った小さな要素ごとに、ほかのすべてのインタラクティブ要素との間隔を測定します。必要な間隔は、水平方向では 24 ピクセルから要素の幅を引いた値、垂直方向では 24 ピクセルから要素の高さを引いた値です。
その間隔内に別のコントロールがある場合、その要素を報告します。ただし、両方が同じ移動先へのリンクである場合を除きます。固定ヘッダーなど、画面に固定された要素は、その下でスクロールするコンテンツではなく、ほかの固定要素と比較します。

トラブルシューティング

小さなコントロールがチェックに合格した

サイズだけでは不合格になりません。小さなコントロールでも、周囲に十分な空白がある場合、テキスト内にインラインで配置されている場合、または同じ場所を指すリンクだけが隣接している場合は合格します。これは WCAG 自体が認めている例外に準拠しています。

一部の不合格だけが一覧に表示される

Silktide は、1 ページにつき重大度の高い例を最大 10 件まで報告します。共通のスタイルを修正すると、多くの指摘を一度に解決できることがあります。

より厳しい基準を適用したい

このチェックでは、レベル AA の最小要件である 24 × 24 ピクセルをテストします。関連する十分な大きさのコントロールチェックでは、より厳しいレベル AAA の推奨値である 44 × 44 ピクセルをテストします。