ボタンサイズ

ボタンサイズが小さすぎる場合の操作性について検証します。

Web Content Accessibility Guidelines (WCAG) 2.1、達成基準 2.5.5 ターゲットのサイズ (レベル AAA) では、「ポインタ入力のターゲットのサイズが 44 × 44 CSS ピクセル以上」としています。すべてにおいてこのサイズを厳守することが難しいにしても、あまりにも小さすぎるボタンなどは操作性を低下させるため気をつける必要があるでしょう。

円形

4px(相当)四方
8px(相当)四方
16px(相当)四方
20px(相当)四方
24px(相当)四方
36px(相当)四方
44px(相当)四方

四角形

4px(相当)四方
8px(相当)四方
16px(相当)四方
20px(相当)四方
24px(相当)四方
36px(相当)四方
44px(相当)四方

円形(2つ並べ)

4px(相当)四方
8px(相当)四方
16px(相当)四方
20px(相当)四方
24px(相当)四方
36px(相当)四方
44px(相当)四方