ناحیه‌های لمسی و بزرگ‌نمایی (Touch Target & Zoom): چرا اندازه و مقیاس‌پذیری در موبایل حیاتی است؟ 📱

سلام همکاران توسعه‌دهنده! 👋

امروز می‌خواهیم در مورد دو چالش بزرگ در تجربه کاربری موبایل و دسترسی‌پذیری (Accessibility) صحبت کنیم که اغلب در شلوغی توسعه فرانت‌اند نادیده گرفته می‌شوند: ناحیه‌های لمسی (Touch Targets) و بزرگ‌نمایی (Zoom).

💡 مفهوم کلیدی

دو مشکل اساسی که کاربران کم‌بینا یا کاربران موبایل با آن مواجه می‌شوند:
۱. دکمه‌ها یا لینک‌هایی که آن‌قدر کوچک یا نزدیک به هم هستند که لمس دقیق آن‌ها با انگشت دشوار یا غیرممکن است.

۲. وب‌سایت‌هایی که قابلیت بزرگ‌نمایی (Zoom) را غیرفعال کرده‌اند یا با زوم کردن، ساختار (Layout) آن‌ها به هم می‌ریزد.

⚠️ اشتباهات رایج (دام‌های طراحی)

• آیکون‌های شبکه‌های اجتماعی با اندازه‌ی ۱۶×۱۶ پیکسل.
• لینک‌های متنی چسبیده به هم بدون فاصله‌ی ایمن (مثلاً: «ویرایش | حذف»).
• اضافه کردن user-scalable=no یا maximum-scale=1 در متاتگ viewport.
• استفاده از font-size ثابت با واحد px که به تنظیمات بزرگ‌نمایی کاربر احترام نمی‌گذارد.

📏 استاندارد طلایی WCAG

برای رعایت اصول دسترسی‌پذیری، این موارد را به خاطر بسپارید:

• حداقل اندازه ناحیه لمسی: ۲۴×۲۴ پیکسل (سطح AA در WCAG 2.2) و ترجیحاً ۴۴×۴۴ پیکسل (سطح AAA).
• بزرگ‌نمایی: کاربر باید بتواند تا ۲۰۰٪ زوم کند بدون اینکه محتوا بریده شود یا نیاز به اسکرول افقی پیدا کند (معیار SC 1.4.4).
• عدم غیرفعال‌سازی زوم: هرگز از user-scalable=no استفاده نکنید. اجازه دهید کاربر کنترل تجربه‌ی خود را در دست داشته باشد.

🛠️ راه‌حل سریع و عملی در کد

۱. ایجاد ناحیه‌ی لمسی کافی (حتی اگر آیکون کوچک است)

/* ❌ اشتباه: آیکون ۱۶ پیکسلی بدون فضای ضرب‌گیر (Padding) */
.icon-btn {
  width: 16px;
  height: 16px;
}

/* ✅ درست: منطقه‌ی کلیکی ۴۴×۴۴ پیکسل، حتی اگر خود آیکون کوچک باشد */
.icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px; /* ✅ ایجاد فاصله‌ی ایمن بین دکمه‌های کناری */
}

۲. تنظیم صحیح متاتگ Viewport

<!-- ❌ اشتباه: قفل کردن قابلیت زوم -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

<!-- ✅ درست: اجازه‌ی بزرگ‌نمایی کامل به کاربر -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

۳. رعایت فاصله بین لینک‌ها یا دکمه‌های کناری (با React و Tailwind)

// ❌ اشتباه: لینک‌ها بدون فاصله و چسبیده به هم
<a href="/edit">ویرایش</a>
<a href="/delete">حذف</a>

// ✅ درست: استفاده از دکمه‌های مجزا با فاصله‌ی استاندارد و ارتفاع کافی
<div className="flex gap-4">
  <button className="min-h-[44px] px-4">ویرایش</button>
  <button className="min-h-[44px] px-4">حذف</button>
</div>

۴. استفاده از واحدهای اندازه‌گیری نسبی

/* ❌ اشتباه: فونت با واحد px ثابت که به تنظیمات کاربر واکنش نشان نمی‌دهد */
.title {
  font-size: 16px;
}

/* ✅ درست: استفاده از rem که به تنظیمات پیش‌فرض مرورگر کاربر احترام می‌گذارد */
.title {
  font-size: 1.25rem;
}

🔗 ابزارهای پیشنهادی برای تست

برای اطمینان از کیفیت کد خود، از این ابزارها استفاده کنید:

1. Chrome DevTools: بخش Rendering → فعال کردن CSS overview (برای بررسی بصری اندازه‌ها و کنتراست).
2. Lighthouse: بخش Accessibility → بررسی هشدار “Touch targets are sized appropriately”.
3. تست دستی: هیچ‌چیز جای تست روی یک دستگاه موبایل واقعی را نمی‌گیرد!

👁️ قانون ۳ ثانیه‌ای:

سایت را روی موبایل باز کنید و با انگشت شست روی یک دکمه‌ی کوچک ضربه بزنید. اگر ۲ بار از ۳ بار اشتباه زدید (یا لمس شما روی دکمه‌ی کناری ثبت شد)، ناحیه‌ی لمسی (Touch Target) مشکل دارد.

سپس ۳ بار زوم کنید (با پینچ روی موبایل یا Ctrl + در دسکتاپ)؛ اگر ساختار صفحه شکست یا به هم ریخت، یعنی مشکل بزرگ‌نمایی (Zoom) دارید.

🗣️ نوبت شماست!

شما چطور اطمینان حاصل می‌کنید که رابط کاربری‌تان برای همه‌ی کاربران (از جمله کاربران موبایل و کم‌بینا) قابل استفاده است؟ آیا ابزار یا ترفند خاصی برای تست دسترسی‌پذیری در گردش کار (Workflow) خود دارید؟

تجربه‌ها و نظرات خود را در بخش کامنت‌ها با من و سایر توسعه‌دهندگان به اشتراک بگذارید! 👇💬