十分な大きさのコントロール

Silktide は、ページ上のボタン、リンク、フォームコントロールを測定し、 44×44ピクセル未満のものを報告します。大きなコントロールは、特にタッチスクリーン上で、誰にとっても正確に押しやすくなります。

重要な理由

小さなターゲットでは、多くの人が持ち合わせていない精密さが求められます。振戦がある方、手先をうまく動かせない方、またはタッチデバイス上で指が大きい方は、小さなコントロールを押し損ねたり、間違ったものを起動したり、何度も試したりすることがよくあります。十分なターゲットサイズを確保すると、運動機能に障害がある方だけでなく、すべての訪問者にとって、サイトの操作が速くなり、ストレスも軽減されます。

これはの達成基準 2.5.5（ターゲットのサイズ（強化））であり、の要件です。AAA は努力目標となる基準です。44×44ピクセルは一般的なリンクやボタンより大きいため、ほとんどのサイトではデフォルトでこのチェックに失敗します。レベル AA を目指している場合は、まず関連するインタラクティブなコンポーネント間の距離のチェックに取り組んでください。このチェックでは、24×24ピクセルという AA の要件をテストします。

修正方法

min-width、min-height、またはパディングを使用して、主要なコントロールを少なくとも 44×44 ピクセルに拡大します。ナビゲーション、検索、フォームボタンなどの主要な操作を優先してください。
コントロールを拡大することが現実的でない場合は、同じページにサイズ要件を満たす同等のリンクまたはコントロールを用意します。同じ遷移先への十分な大きさのリンクが存在する場合、 Silktide は小さなリンクを自動的にスキップします。
たとえば、このチェックでは検出できない WCAG の例外に該当するなど、コントロールを現状のままで問題ないと判断した場合は、該当項目をするか、要素をチェック対象から除外できます。

/* 問題: 30×30のアイコンボタン */
.search-button {
  width: 30px;
  height: 30px;
}

/* 修正: 44×44の推奨サイズを満たす */
.search-button {
  min-width: 44px;
  min-height: 44px;
}

Silktide によるテスト方法

すべてのページについてモバイル版とデスクトップ版の両方をテストします。結果は両者で異なる場合があります。
リンク、ボタン、フォームフィールド、イメージマップ領域など、インタラクティブな要素を見つけます。
通常は表示されない要素（用に画面外に配置されたコンテンツなど）と、チェック対象から除外した要素を無視します。
テキストのすぐ隣にあるコントロールは、WCAG で文章またはテキストブロック内に表示されるターゲットが除外されているため、無視します。
リンクについては、同等のリンクがあるものを無視します。同等のリンクとは、同じページ上にある、同じ遷移先を指し、44×44ピクセル以上のサイズを持つ、別の表示リンクです。
残った要素のうち、幅または高さが44ピクセル未満のものをすべて報告します。サイズは比較前に小数第1位に丸められます。これは、報告画面で表示される値と同じです。

トラブルシューティング

一部の失敗しか一覧に表示されない

Silktide は、1ページにつき最大100件の例を報告します。このチェックの失敗はよくあるため、 1ページにそれ以上存在する場合があります。共通のスタイルを修正すると、多くの項目を一度に解決できます。

WCAG では、このチェックで検出できない例外が認められている

WCAG では、サイズが不可欠なターゲット、ブラウザーによってサイズが設定されていてスタイルで変更されていないターゲット、またはページ上の別の場所に同等のコントロールが複製されているターゲットが除外されます。Silktide は、インラインテキストと同等のリンクに関する例外を自動的に検出しますが、それ以外については判断が必要です。該当する項目を承認してください。