Touch Target Checker

1/* Ensure minimum touch target size */
2.touch-target {
3  min-width: 44px;
4  min-height: 44px;
5}
6
7/* Extend touch area without changing visual size */
8.extended-touch-area {
9  position: relative;
10}
11
12.extended-touch-area::before {
13  content: "";
14  position: absolute;
15  top: 50%;
16  left: 50%;
17  transform: translate(-50%, -50%);
18  min-width: 44px;
19  min-height: 44px;
20  width: 100%;
21  height: 100%;
22}
23
24/* For small checkboxes and radio buttons */
25.accessible-checkbox {
26  position: relative;
27  width: 20px;
28  height: 20px;
29}
30
31.accessible-checkbox::after {
32  content: "";
33  position: absolute;
34  top: 50%;
35  left: 50%;
36  transform: translate(-50%, -50%);
37  width: 44px;
38  height: 44px;
39  /* Invisible but clickable */
40}
41
42/* Tailwind utility for minimum touch target */
43.min-touch {
44  @apply min-w-[44px] min-h-[44px];
45}
46
47/* Icon button with proper sizing */
48.icon-button {
49  @apply inline-flex items-center justify-center;
50  @apply w-11 h-11; /* 44px */
51  @apply rounded-lg;
52  @apply transition-colors;
53}