モバイルコントロールが小さい

Silktide はシミュレートしたモバイルデバイスで各ページを読み込み、確実にタップするには小さすぎるリンク、ボタン、フォームコントロールを報告します。合格するには、コントロールの幅と高さがそれぞれ12ピクセル以上必要です。

これが重要な理由

指はマウスポインターほど正確ではありません。デスクトップでは簡単にクリックできるコントロールでも、スマートフォンではほとんどタップできない場合があります。訪問者が押し損ねて隣のリンクを押してしまい、意図しない場所に移動してしまうのです。運動障害や手の震えがある人、指が大きい人は特に影響を受けますが、小さなターゲットを押し損ねるのは誰にでも起こります。

12ピクセルというしきい値で検出できるのは、極端に小さいコントロールだけです。快適にタップできるターゲットはかなり大きく、一般的なガイダンスでは約44ピクセルが推奨されています。

修正方法

指摘されたコントロールのサイズを大きくします。テキストを大きくする、パディングを増やす、またはで明示的な最小サイズを指定します。


/* タップターゲットに快適な最小サイズを設定 */
a.icon-button {
  min-width: 44px;
  min-height: 44px;
}

アイコンだけのリンクでは、アイコン自体を大きくするのではなく、パディングを使ってアイコンよりもタップ可能な領域を大きくします。
空のまま残ったリンクなど、要素をそもそもインタラクティブにする必要がない場合は、サイズを変更するのではなく削除します。

Silktide によるテスト方法

シミュレートしたモバイルデバイスでページを読み込みます。
すべてのインタラクティブなコントロール（リンク、イメージマップの領域、フォーム入力、ドロップダウンメニュー、テキストエリア、ボタン）を見つけます。
ページの読み込み時に非表示になっているコントロール、サイズがないコントロール、画面外に完全にあるコントロールを除外します。
残った各コントロールを測定し、幅または高さが12ピクセル未満のものを報告します。

トラブルシューティング

操作後にのみ要素が表示される

Silktide はページの読み込み時の状態を測定します。後から開くメニューやパネル内のコントロールは初期状態で測定されるため、アニメーションの途中にある要素が誤って指摘されることがあります。実際に使用できる状態でコントロールが十分なサイズであれば、検出結果をしてください。

WCAG のターゲットサイズのルールとはどのような関係がありますか？

このチェックは、意図的に緩やかなしきい値を設定したモバイルユーザビリティのチェックです。関連するのチェックである、レベルAAのターゲットのサイズと、の適切なターゲットサイズでは、より厳しいサイズ要件が、より細かな例外規定とともに適用されます。