⏭️ لینک «پرش به محتوای اصلی» (Skip to Main Content): چرا و چگونه؟

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

امروز می‌خواهیم در مورد یکی از ساده‌ترین اما حیاتی‌ترین ویژگی‌های دسترسی‌پذیری (Accessibility) صحبت کنیم: لینک پرش به محتوای اصلی (Skip Link). این ویژگی کوچک، تأثیر بزرگی بر تجربه کاربری افراد دارای معلولیت دارد.

💡 مفهوم کلیدی

کاربرانی که با کیبورد یا اسکرین‌ریدر (Screen Reader) کار می‌کنند، مجبورند هر بار که وارد صفحه‌ی جدیدی می‌شوند، از بین ده‌ها لینک منو، لوگو، دکمه‌های شبکه‌های اجتماعی و فوتر با کلید Tab عبور کنند تا به محتوای اصلی برسند. لینک Skip این مشکل را با ایجاد یک میانبر مستقیم حل می‌کند.

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

فکر کردن به اینکه «این لینک اضافی است و ظاهر رابط کاربری (UI) را زشت می‌کند» و حذف کامل آن؛ یا پیاده‌سازی ظاهری که در عمل، فوکوس (Focus) را به درستی منتقل نمی‌کند.

📏 استاندارد WCAG (معیار موفقیت ۲.۴.۱)

هر صفحه باید مکانیزمی داشته باشد که به کاربر اجازه دهد بلوک‌های تکراری (مثل منوی اصلی) را دور بزند. این یک الزام سطح A است، یعنی حداقلِ حداقلِ استانداردهای دسترسی‌پذیری.

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

۱. قرار دادن لینک به عنوان اولین عنصر قابل فوکوس در <body>

// ✅ درست: اولین عنصر در بدنه‌ی صفحه
<a
  href="#main-content"
  className="skip-link"
>
  پرش به محتوای اصلی
</a>

۲. مشخص کردن محتوای اصلی با id و tabIndex

// ✅ درست: استفاده از id و tabIndex برای مدیریت فوکوس
<main id="main-content" tabIndex={-1}>
  {/* محتوای اصلی صفحه در اینجا قرار می‌گیرد */}
</main>

۳. استایل‌دهی: مخفی تا زمانی که فوکوس شود

/* ✅ درست: لینک از صفحه خارج است، اما با فوکوس کیبورد ظاهر می‌شود */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  transition: top 0.2s ease-in-out;
  text-decoration: none;
  font-weight: bold;
}

.skip-link:focus {
  top: 8px; /* ✅ هنگام فوکوس با کلید Tab به داخل صفحه می‌آید */
}

(💡 نکته حرفه‌ای: اگر از Tailwind CSS استفاده می‌کنید، می‌توانید به جای CSS سفارشی، از کلاس‌های sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 استفاده کنید که همان رفتار را با کد کمتر پیاده‌سازی می‌کند.)

🔑 نکته‌ی کلیدی که بسیاری فراموش می‌کنند!

اضافه کردن tabIndex={-1} به تگ <main> ضروری است! بدون این ویژگی، در برخی مرورگرها (به‌ویژه Safari)، پس از کلیک روی لینک Skip، فوکوس به درستی به <main> منتقل نمی‌شود و اسکرین‌ریدر همچنان از ابتدای صفحه شروع به خواندن می‌کند.

🔗 ابزار و روش تست

تست این ویژگی بسیار ساده است:

1. صفحه‌ی وب خود را باز کنید.
2. ماوس را کنار بگذارید و فقط کلید Tab را فشار دهید.
3. اولین چیزی که باید ظاهر شود، همین لینک «پرش به محتوای اصلی» است. اگر منوی ناوبری اول ظاهر شد، یعنی جای لینک اشتباه است یا z-index کافی ندارد.

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

صفحه را باز کنید، ماوس را کنار بگذارید و فقط با Tab حرکت کنید. اگر مجبور شدید بیشتر از ۵ بار Tab بزنید تا به محتوای اصلی برسید، یعنی Skip Link ندارید یا به درستی کار نمی‌کند.

---

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

شما چطور دسترسی‌پذیری (Accessibility) را در گردش کار (Workflow) توسعه‌ی خود ادغام می‌کنید؟ آیا از ابزارهای خودکار مثل axe-core استفاده می‌کنید یا تست‌های دستی کیبورد را ترجیح می‌دهید؟

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