WCAG 2.2（2023年勧告）＆障害者差別解消法で問われるUI設計基準：
- Target Size (Minimum) 2.5.8 (Level AA)： ボタンやリンクの操作領域は最低 24×24 CSSピクセル 以上（または十分な余白）を確保すること。
- Target Size (Enhanced) 2.5.5 (Level AAA)： 推奨値は成人の指の腹に合わせた 44×44 CSSピクセル 以上。
- Text Spacing 1.4.12 (Level AA)： 行間1.5倍、段落間2倍、文字間0.12倍を適用してもテキストが溢れたり重ならないこと。
1 検証コンポーネントプリセット
主要UIパーツ2 アクセシビリティ適合判定結果
WCAG 2.2 / JIS X 8341-33 リアルタイム実機プレビュー
マウスホバーで「成人の指の腹（48px径サークル）」を重ね合わせてタップ精度を体感できます
💻 コピペ用 CSS / Tailwind コード
📖 Webアクセシビリティ＆UIデザイン必須アイテム
JIS X 8341-3準拠・WCAG 2.2対応のプロ開発者向け参考図書＆検証デバイス
コーディングWebアクセシビリティ - W3C勧告（WCAG 2.2）に基づくフロントエンド実装
セマンティックHTML、WAI-ARIA、ターゲットサイズ、キーボード操作性の実装パターンを完全網羅。
見えにくい、読みにくいを解消するデザイン - 色・文字・レイアウトのアクセシビリティ
視覚特性や加齢、スマホ画面でのタップ領域や余白設計の黄金律を豊富なビジュアルで解説したデザイナー必読の実践書。
ロジクール ワイヤレス トラックボール MX ERGO (エルゴノミクス設計)
微細なポインタ操作と長時間のUIアクセシビリティ検査における手首の負担を軽減。ユーザーのポインティング環境のテストにも最適。
【Webアクセシビリティ UIターゲット＆テキスト間隔 適合検査シート】
Goroneko Accessibility Suite (exp252 / WCAG 2.2・JIS X 8341-3)
■ WCAG 2.2 達成基準 適合判定サマリー
| 達成基準 | 要求水準 | 測定値 | 判定結果 |
|---|
■ 改善アドバイス・総評
ターゲットサイズはWCAG 2.2 Level AAA（44×44px）を満たしており、成人成人の親指操作でも誤タップのリスクが極めて低い優れたUI設計です。
❓ Webアクセシビリティ＆ターゲットサイズ FAQ
Q. テキストリンクで24pxや44pxの幅・高さを確保できない場合はどうすれば良いですか？
WCAG 2.2の達成基準2.5.8（Level AA）では「インライン（文中・文脈内）のテキストリンク」は例外規定（Inline例外）とされており、24×24pxの厳密な矩形サイズは必須ではありません。ただし、リンク同士が縦に近接して並ぶナビゲーションやフッターリンク等では、上下パディングを `py-2`（8px以上）設けて誤タップを防ぐことが強く推奨されます。
Q. アイコンだけのボタン（20×20px等）はどう対策すべきですか？
見た目のアイコンサイズが20×20pxであっても、CSSのパディング（例: `padding: 12px`）や、擬似要素（`::before` / `::after`）で透明なタップ領域を広げることで、外見のデザインを崩さずにタップ判定領域のみ44×44px以上を確保することができます。
Q. 2024年4月の法改正で民間企業はどこまで対応する必要がありますか？
改正障害者差別解消法の施行により、すべての民間事業者に「合理的配慮の提供」が義務化されました。Webサイトやオンラインサービスにおいて「利用者が操作できない・購入できない」状態を放置することは法的リスクにつながります。JIS X 8341-3（またはWCAG 2.0〜2.2）のLevel AA適合を目標に対策を進めることが現在の業界標準となっています。