JavaScript نے ساکن (static) دستاویزات کو سافٹ ویئر میں بدل دیا۔ Single-page apps فوری محسوس ہوتی ہیں۔ کوئی مکمل پیج ری لوڈ نہیں، کوئی جھپکتی ہوئی سفید اسکرین نہیں۔ لیکن اس رفتار کی ایک قیمت ہے جسے بہت سی ٹیمیں نظر انداز کر دیتی ہیں: ویب کی بنیادی مشینری گلنا شروع ہو جاتی ہے۔ نیویگیشن کمزور ہو جاتی ہے۔ سرچ انجن راستوں پر عمل کرنے میں دشواری محسوس کرتے ہیں۔ اسکرین ریڈرز راستہ بھٹک جاتے ہیں۔ اور صارفین خود کو ایسے انٹرفیس میں پھنسا ہوا پاتے ہیں جو ویب سائٹس کی طرح نظر آتے ہیں لیکن ٹوٹے ہوئے ڈیسک ٹاپ ایپلی کیشنز کی طرح کام کرتے ہیں۔

اس کی اصل وجہ عام طور پر ایک div ہوتا ہے جس میں onClick ہینڈلر لگا ہوتا ہے۔

Divs کو لنکس کے طور پر استعمال کرنا بند کریں

ایک div کا کوئی سیمنٹک (semantic) مطلب نہیں ہوتا۔ یہ محض ایک باکس ہے۔ جب آپ اس پر کلک ہینڈلر لگاتے ہیں اور اسے صارفین کو نئے ویو (view) پر بھیجنے کے لیے استعمال کرتے ہیں، تو آپ براؤزر سے یہ مطالبہ کر رہے ہوتے ہیں کہ وہ گتے کے ڈبے کو دروازے کی طرح سمجھے۔ براؤزر انکار کر دیتا ہے۔ اور براؤزر کے گرد بنی ہوئی ہر ٹول بھی ایسا ہی کرتی ہے۔

اسکرین ریڈرز div کو لنک یا بٹن کے طور پر نہیں بتاتے۔ وہ اسے نظر انداز کر دیتے ہیں، یا اسے سادہ متن کے طور پر پڑھتے ہیں۔ آواز کے ذریعے نیویگیٹ کرنے والا صارف اسے نشانہ نہیں بنا سکتا۔ سرچ انجن کرالر، جو آپ کے پیج پر قابلِ تلاش URLs تلاش کر رہا ہوتا ہے، اسے فالو کرنے کے لیے کچھ نہیں دیکھ پاتا۔ آپ کا روٹ (route) ایسا ہی ہے جیسے اس کا وجود ہی نہ ہو۔

اس سے بھی بدتر یہ ہے کہ آپ وہ طرزِ عمل کھو دیتے ہیں جس سے صارفین پہلے سے واقف ہیں۔ ایک حقیقی لنک کسی کو نئے ٹیب میں کھولنے، منزل کو بک مارک کرنے، یا شیئر کرنے کے لیے ایڈریس کاپی کرنے کی اجازت دیتا ہے۔ کی بورڈ استعمال کرنے والے صارفین Tab دبا کر اس تک پہنچنے اور Enter دبا کر اسے کھولنے کی توقع رکھتے ہیں۔ ایک div یہ سب فراہم نہیں کرتا۔ اگر آپ اس میں tabIndex اور role="link" اور کی بورڈ لسنرز (listeners) بھی لگا دیں، تب بھی آپ اس چیز کو ناقص طریقے سے دوبارہ بنا رہے ہیں جو براؤزر آپ کو مفت فراہم کرتا ہے۔ اور آپ کسی نہ کسی خاص صورتحال (edge case) کو بھول جائیں گے۔ آپ ہمیشہ بھول جاتے ہیں۔

منزلوں کے لیے Anchors اور اعمال کے لیے Buttons استعمال کریں

HTML نے اس کا حل پہلے ہی نکال لیا ہے۔ الجھن اس لیے شروع ہوتی ہے کیونکہ دونوں عناصر کلک کرنے کے قابل نظر آتے ہیں، اس لیے ڈویلپرز انہیں ایک دوسرے کی جگہ استعمال کرنے کے قابل سمجھتے ہیں۔ ایسا نہیں ہے۔

جب آپ صارف کو ایک نئے URL پر لے جانا چاہتے ہیں تو <a> ٹیگ استعمال کریں۔ یہ کوئی مصنوعی ویو سویپ (view swap) یا اسٹیٹ چینج (state change) نہیں، بلکہ ایک اصل مقام ہونا چاہیے۔ href ایٹریبیوٹ میں ایک حقیقی ایڈریس ہونا چاہیے:

<a href="/docs">Documentation</a>

بس اتنا ہی۔ اگر صارف کہیں جا رہا ہے، تو لنک استعمال کریں۔

جب موجودہ پیج پر کچھ ہو رہا ہو تو <button> استعمال کریں۔ بٹن ان اعمال کے لیے ہوتے ہیں جیسے:

  • موڈل (modal) کھولنا
  • فارم جمع کروانا (submitting a form)
  • سیٹنگز محفوظ کرنا
  • مینو کو ٹگل (toggle) کرنا

لنکس منزلوں کے لیے ہیں۔ بٹن اعمال کے لیے ہیں۔ دونوں کو ملانے سے آپ کا انٹرفیس الجھ جاتا ہے اور صارفین کی توقعات ٹوٹ جاتی ہیں۔

براؤزر کو اپنا کام کرنے دیں

جدید براؤزرز دہائیوں کے ارتقاء اور معیار سازی (standardization) کا نتیجہ ہیں۔ وہ سیکیورٹی، ہسٹری، پری فfetching (prefetching) اور رسائی (accessibility) کو آپ کے ہاتھ سے لکھے گئے JavaScript سے کہیں بہتر طریقے سے سنبھالتے ہیں۔

ایک حقیقی اینکر ٹیگ خود بخود براؤزر ہسٹری اسٹیک کو فیڈ کرتا ہے۔ یہ نیٹو کنٹیکسٹ مینو (native context menu) کے ساتھ کام کرتا ہے۔ جب صارف اس پر ہوور (hover) کرتا ہے یا فوکس کرتا ہے، تو یہ براؤزر کے بلٹ ان پری فfetching الگورتھم میں حصہ لیتا ہے، جس سے آپ کی ایپ کوڈ کی ایک لائن لکھے بغیر بھی تیز محسوس ہوتی ہے۔ یہ لنکس کھولنے کے لیے صارف کی ترجیحات کا احترام کرتا ہے۔ یہ پاس ورڈ مینیجرز، ترجمہ کرنے والے ٹولز اور ریڈر موڈز کے ساتھ تعاون کرتا ہے۔

جب آپ اسے JavaScript نیویگیشن فنکشن سے بدل دیتے ہیں، تو آپ ان تمام سہولیات سے دستبردار ہو جاتے ہیں۔ آپ صرف فیچرز نہیں کھو رہے؛ بلکہ آپ صارفین کو ان عادات کو چھوڑنے پر مجبور کر رہے ہیں جو انہوں نے انٹرنیٹ کی ہر دوسری سائٹ پر بنائی ہیں۔ یہ کوئی تکنیکی فیصلہ نہیں ہے۔ یہ ایک دشمنانہ یوزر ایکسپیریئنس (user experience) ہے۔

چیک کریں کہ آپ کا فریم ورک اصل میں کیا رینڈر کرتا ہے

React Router، Vue Router، Next.js Link components، SvelteKit۔ یہ ٹولز کلائنٹ سائیڈ روٹنگ کو آسان بنا دیتے ہیں۔ لیکن ایبسٹریکشن (abstraction) غلطیوں کو جنم دیتی ہے۔

اپنے DOM کا معائنہ کریں۔ براؤزر کے ڈویلپر ٹولز کھولیں اور ان عناصر کو دیکھیں جو آپ کا فریم ورک جاری (emit) کرتا ہے۔ ایک <Link> کمپوننٹ کو فائنل HTML میں ایک درست href ایٹریبیوٹ کے ساتھ ایک حقیقی <a> ٹیگ کے طور پر رینڈر ہونا چاہیے۔ اگر یہ span یا div یا کسی اور چیز کے طور پر رینڈر ہوتا ہے جس میں مناسب href نہ ہو، تو آپ کی ایبسٹریکشن آپ کو ناکام کر چکی ہے۔ کمپوننٹ کو ٹھیک کریں۔ ڈیفالٹ کو اوور رائڈ (override) کریں۔ passHref پراپ یا فریم ورک کے مساوی چیز استعمال کریں۔ تصدیق کے بغیر فریم ورک پر بھروسہ نہ کریں۔

یہ ہائیڈریشن مس میچز (hydration mismatches) کے لیے بھی اہم ہے۔ اگر سرور ایک لنک رینڈر کرتا ہے اور کلائنٹ اسے نان-لنک (non-link) میں ہائیڈریٹ کرتا ہے، تو آپ ایسی رسائی (accessibility) کے بگ پیدا کرتے ہیں جن کا سراغ لگانا مشکل ہوتا ہے کیونکہ HTML آپ کے سورس کوڈ میں درست نظر آتا ہے لیکن لائیو DOM میں غلط ہوتا ہے۔

فرضی منزلوں پر پابندی لگائیں

ایک ایسا پیٹرن ہے جو ختم ہونے کا نام نہیں لے رہا: href="javascript:void(0)"۔ ڈویلپرز اسے اس وقت استعمال کرتے ہیں جب وہ ایسی چیز چاہتے ہیں جو لنک کی طرح نظر آئے لیکن بٹن کی طرح کام کرے، عام طور پر اس لیے کہ وہ بٹن کو اسٹائل نہیں کرنا چاہتے یا پرانے کوڈ بیس کی ضرورت ہوتی ہے۔

رک جائیں۔ یہ کوئی URL نہیں ہے۔ یہ براؤزر کو کوئی منزل فراہم نہیں کرتا۔ یہ ہسٹری اسٹیک (history stack) کو ناقابل استعمال حالتوں سے بھر دیتا ہے۔ یہ براؤزر کی ہسٹری اور رسائی (accessibility) کو خراب کرتا ہے۔ یہ ایک جال ہے۔ اگر آپ کو نیویگیشن کے بغیر کلک کا عمل چاہیے، تو آپ کو ایک <button> کی ضرورت ہے۔ اسے اپنی مرضی کے مطابق اسٹائل کریں۔ CSS کو اس سے کوئی فرق نہیں پڑتا کہ عنصر ایک بٹن ہے یا لنک۔ آپ کے صارفین کو فرق پڑتا ہے۔

ایسا متن لکھیں جو بتائے کہ صارف کہاں جا رہا ہے

آپ کے لنک کے اندر موجود الفاظ اہمیت رکھتے ہیں۔ اسکرین ریڈر (screen reader) استعمال کرنے والے اکثر صفحے پر موجود تمام لنکس کی فہرست نکالتے ہیں تاکہ انہیں جلدی سے دیکھ سکیں۔ اگر آپ کے تمام لنکس "Read more" یا "Click here" کہتے ہیں، تو وہ فہرست بیکار شور بن جاتی ہے۔

مخصوص ہوں۔ ان کا موازنہ کریں:

  • غلط: <a href="/security/api-guide">Read more</a>
  • درست: <a href="/security/api-guide">Read the API security guide</a>

دوسرا آپ کو بالکل بتاتا ہے کہ آپ کو کیا ملے گا۔ یہ سرچ انجنوں کو منزل والے صفحے کے بارے میں سیاق و سباق (context) فراہم کرتا ہے۔ یہ آپ کی لنک فہرست کو قابلِ استعمال (navigable) بناتا ہے۔ وضاحتی لنک ٹیکسٹ (descriptive link text) رسائی (accessibility) کے حوالے سے ان آسان ترین طریقوں میں سے ایک ہے جسے آپ حاصل کر سکتے ہیں۔

مکمل سنجیدگی کے ساتھ ٹیسٹ کریں

اگر آپ اس کی تصدیق نہیں کرتے تو آرکیٹیکچر (architecture) کا کوئی فائدہ نہیں ہے۔

سب سے پہلے، اپنے کی بورڈ کے بہاؤ (keyboard flow) کو ٹیسٹ کریں۔ اپنا ماؤس ہٹا دیں۔ اپنی سائٹ کے ہر انٹرایکٹو عنصر (interactive element) پر Tab کے ذریعے جائیں۔ ہر حقیقی لنک کو ایک واضح فوکس آؤٹ لائن (focus outline) دکھانی چاہیے، کوئی ہلکی سی چمک نہیں جو آپ کے بیک گراؤنڈ میں غائب ہو جائے، بلکہ ایک واضح رنگ (ring) جو تھکی ہوئی آنکھ بھی دیکھ سکے۔ Enter دبائیں۔ اسے لنک کو فعال کرنا چاہیے۔ اگر Tab کسی عنصر کو چھوڑ دیتا ہے، یا اگر Enter سے کچھ نہیں ہوتا، تو آپ کے پاس ایک بگ (bug) ہے۔

دوسرا، اپنے روٹس (routes) کو سرور کی سطح پر ٹیسٹ کریں۔ کلائنٹ سائیڈ روٹنگ (client-side routing) محض ایک ظاہری پردہ ہے۔ اگر کوئی صارف /dashboard/reports کو بک مارک کرتا ہے اور کل واپس آتا ہے، یا ریفریش کرتا ہے، تو آپ کے سرور کو معلوم ہونا چاہیے کہ اس صفحے کو کیسے پیش کرنا ہے۔ اپنے ریورس پراکسی (reverse proxy) یا اپنے سرور فریم ورک کو اس طرح کنفیگر کریں کہ نامعلوم راستوں کے لیے وہ آپ کے ایپلی کیشن شیل (application shell) پر واپس جائے، یا براہ راست درست HTML فراہم کرے۔ ریفریش کرنے پر 404 ایرر کا آنا کوئی معمولی بگ نہیں ہے۔ یہ ایک ٹوٹا ہوا وعدہ ہے۔

JavaScript ایک طاقتور تہہ (layer) ہے