jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 タッチターゲットサイズチェッカー

WCAG 2.2最小サイズ（2.5.8）に基づいてインタラクティブ要素をチェックし、AA/AAA結果とCSS推奨を表示します。

ツールを読み込み中...

タッチターゲットサイズチェッカーとは

WCAG 2.2 Success Criterion 2.5.8 Target Size requires that interactive elements have a target area of at least 24x24 CSS pixels (AA). The AAA level requires 44x44px. These sizes ensure that people with motor impairments or using touch devices can reliably tap or click interactive elements without accidentally activating adjacent elements.

クイックアンサー

WCAG 2.2 requires interactive elements to have a target size of at least 24x24px (AA) or 44x44px (AAA). Four exceptions apply: inline links, native controls, essential elements, and elements with 24px+ spacing to adjacent targets. Use CSS min-width/min-height and gap/padding to fix undersized targets.

制限事項

  • This tool checks static dimensions only. It does not account for dynamic layouts, responsive breakpoints, or zoom levels that may change the effective target size at different screen sizes.
  • The spacing exception requires manual verification of actual spacing between adjacent targets. This tool checks the spacing value you enter but cannot measure actual DOM layout distances.
  • WCAG 2.5.8 is a Level AA requirement in WCAG 2.2. Some enforcement bodies may apply it more strictly than others, and interpretation of exceptions varies.

使い方

  1. Enter the width and height of your interactive element in CSS pixels.
  2. Enter the spacing to the nearest adjacent interactive element if known.
  3. Select the element type — different exceptions apply to inline links, native controls, and essential elements.
  4. Review the pass/fail result and CSS fix recommendations.

主な用途

  • Check that mobile navigation buttons meet the 24px AA target size requirement.
  • Verify that small icon-only buttons have sufficient spacing to adjacent elements to qualify for the spacing exception.
  • Audit a page for touch accessibility before a WCAG compliance review.

用途

使用例

例

Mobile nav icon buttons

A mobile nav has 20x20px icon buttons. The tool reports AA failure. Adding 4px padding to reach 24x24px passes AA, or adding 24px spacing between buttons qualifies for the spacing exception.

例

Inline text links

An article has inline text links that are only 18px tall. The tool applies the inline exception and passes AA because links within text blocks are exempt from minimum target size.

よくあるミス

  • Assuming spacing alone fixes target size — the spacing exception requires the element to be at least 20px and have 24px spacing to adjacent targets.
  • Applying the inline exception to non-inline elements like standalone buttons or navigation links — the inline exception only applies to links within text blocks.
  • Checking desktop dimensions instead of CSS pixels — CSS pixels may differ from device pixels on high-DPI screens. Always use computed CSS values from DevTools.

検証

  1. Use browser DevTools to inspect the computed width and height of the element in CSS pixels.
  2. Verify spacing between adjacent interactive elements using DevTools distance measurement or by inspecting the gap, margin, and padding properties.

FAQ

タッチターゲットサイズチェッカーのFAQ

What counts as spacing to an adjacent target?

Spacing is measured from the edge of one target to the edge of the next nearest interactive element. This includes buttons, links, inputs, and any other clickable element. White space, margins, padding, or non-interactive content between targets counts as spacing. The spacing exception requires at least 24px of clearance.

Does this check apply to desktop as well as mobile?

WCAG 2.5.8 applies to all devices with pointer inputs, including desktop mouse pointers. While the criterion was motivated by mobile touch accessibility, the requirement is device-agnostic. Desktop users with motor impairments or using alternative pointing devices also benefit from larger targets.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください