ویب سائٹ کو قابل رسائی کیسے بنائیں: WCAG 2.2 کی ابتدائی گائیڈ

ویب سائٹ کو قابل رسائی بنانے کے لیے اسے ایسے بنائیں کہ لوگ اسے کی بورڈ، screen reader، زوم یا switch device کے ساتھ بھی استعمال کر سکیں، نہ کہ صرف ماؤس سے: بٹنوں، لنکس، ہیڈنگز اور فارم لیبلز کے لیے اصل HTML عناصر استعمال کریں، تصاویر کو بامعنی alt ٹیکسٹ دیں، متن کا کنٹراسٹ زیادہ رکھیں اور focus نظر آنے والا بنائیں۔ ہدف WCAG 2.2 Level AA ہے۔ خودکار چیکرز مسئلے کا کچھ حصہ پکڑتے ہیں؛ دس منٹ کا کی بورڈ اور screen reader ٹیسٹ باقی کا بڑا حصہ پکڑ لیتا ہے۔

عملی طور پر "قابل رسائی" کا مطلب

رسائی لوگوں کے بارے میں ہے: کوئی نابینا شخص جو screen reader استعمال کرتا ہے، کوئی ہاتھ کی کپکپاہٹ والا شخص جو کی بورڈ سے نیویگیٹ کرتا ہے، کوئی کم بینائی والا شخص جو 200 فیصد تک زوم کرتا ہے، کوئی شخص جو تیز دھوپ میں پڑھ رہا ہے، کوئی شخص جس کا ہاتھ عارضی طور پر ٹوٹا ہوا ہے۔ اچھی رسائی اکثر سب کے لیے سائٹ بہتر بناتی ہے، جیسے واضح ساخت، پڑھنے میں آسان متن اور ایسے فارمز جو اپنی غلطیاں بتاتے ہوں۔

حوالہ معیار W3C کے Web Content Accessibility Guidelines (WCAG) ہیں۔ ستمبر 2026 تک موجودہ ورژن WCAG 2.2 ہے (اکتوبر 2023 میں شائع، دسمبر 2024 میں اپ ڈیٹ ہوا)؛ WCAG 3 ابتدائی مسودہ ہے۔ WCAG چار اصولوں کے گرد منظم ہے، یعنی مواد کو قابلِ ادراک، قابلِ عمل، قابلِ فہم اور مضبوط ہونا چاہیے، اور اس کی تین مطابقت کی سطحیں ہیں:

کئی جگہوں کے قوانین WCAG کا حوالہ دیتے ہیں، مثلاً European Accessibility Act، جو جون 2025 سے EU میں بہت سی صارف کے لیے ڈیجیٹل خدمات پر لاگو ہے۔ آپ پر کون سے قواعد لاگو ہوتے ہیں یہ اس پر منحصر ہے کہ آپ کہاں کام کرتے ہیں اور کیا بیچتے ہیں؛ اگر یقین نہ ہو تو کسی مشیر سے پوچھیں۔ یہ گائیڈ عملی کام پر ہے۔

آپشنز: وہاں کیسے پہنچیں

زیادہ تر چھوٹی سائٹس کے لیے پہلے دو کافی ہیں: AI سے شروع ہی سے رسائی کے ساتھ بنانے کو کہیں، پھر لانچ سے پہلے آڈٹ کریں۔

سب سے اہم درستیاں

درست HTML عناصر استعمال کریں

زیادہ تر رسائی درست HTML سے مفت میں مل جاتی ہے۔ <button> قابلِ focus ہوتا ہے، Enter اور Space کے ساتھ کام کرتا ہے، اور بطور بٹن اعلان ہوتا ہے۔ کلک ہینڈلر والا <div> ان میں سے کچھ بھی نہیں۔ AI سے بنایا گیا کوڈ اکثر ہر چیز کے لیے سجائے ہوئے div استعمال کرتا ہے؛ semantic عناصر مانگیں:

• عمل کے لیے <button>، نیویگیشن کے لیے <a href>
• ہر صفحے پر ایک <h1>، پھر ترتیب سے <h2>، <h3>؛ screen reader استعمال کرنے والے ہیڈنگز کے درمیان چھلانگ لگاتے ہیں
• Landmarks: <header>، <nav>، <main>، <footer>
• ہر فارم فیلڈ سے جڑا ہوا <label>
• <html lang="en"> میں صفحے کی زبان

ARIA attributes صرف اس وقت استعمال کریں جب کوئی اصل عنصر موزوں نہ ہو، مثلاً کسی کسٹم tab سیٹ یا combobox کے لیے۔ غلط ARIA بغیر ARIA کے بھی بدتر ہے۔

کی بورڈ رسائی اور نظر آنے والا focus

جو کچھ آپ ماؤس سے کر سکتے ہیں وہ صرف کی بورڈ سے بھی ہونا چاہیے (WCAG 2.1.1)۔ صفحے پر Tab دبائیں: ہر لنک، بٹن اور فیلڈ منطقی ترتیب میں پہنچنے کے قابل ہونا چاہیے، اور آپ کو ہمیشہ دکھائی دینا چاہیے کہ focus کہاں ہے (2.4.7 Focus Visible)۔ WCAG 2.2 نے یہ شامل کیا کہ focus کیا ہوا عنصر sticky headers یا cookie banners کے پیچھے مکمل طور پر چھپا نہیں ہونا چاہیے (2.4.11، Level AA)۔

عام خرابیاں: ایسے مینیوز جو صرف hover پر کھلتے ہیں، ایسے modals جو focus کو قید نہیں کرتے یا Escape سے بند نہیں ہوتے، اور CSS میں outline: none جس کی جگہ کچھ نہ ہو۔

متنی متبادل

ہر بامعنی تصویر کو alt ٹیکسٹ چاہیے جو سیاق میں بتائے کہ وہ کیا دکھاتی ہے ("شیف ٹیسٹنگ مینیو سجا رہا ہے"، نہ کہ "image1.jpg")۔ سجاوٹی تصاویر کو خالی alt="" دیں تاکہ screen readers انہیں چھوڑ دیں۔ صرف آئیکن والے بٹنوں کا قابل شناخت نام ہونا چاہیے ("بند کریں"، "تلاش")۔ ویڈیوز کو captions اور آڈیو کو transcript چاہیے۔

رنگ اور کنٹراسٹ

WCAG 2.2 AA عام متن کے لیے کم از کم 4.5:1 کنٹراسٹ ریشو مانگتا ہے اور بڑے متن کے لیے 3:1 (1.4.3)، اور interface کے اجزا جیسے input بارڈرز اور بامعنی آئیکنز کے لیے 3:1 (1.4.11)۔ ہلکے گرے placeholder متن اور پھیکے بٹن عام ناکامیاں ہیں۔ اس کے علاوہ کبھی صرف رنگ سے معنی نہ دیں: غلط فیلڈ پر سرخ بارڈر کے ساتھ ایک غلطی کا پیغام بھی ہونا چاہیے۔

سائز بدلنا اور reflow

متن 200 فیصد زوم پر بھی قابلِ استعمال رہنا چاہیے (1.4.4)، اور مواد 320 CSS پکسلز کی چوڑائی پر بغیر افقی اسکرول کے کام کرنا چاہیے (1.4.10)۔ ایک درست ریسپانسو لے آؤٹ زیادہ تر یہ پورا کر دیتا ہے۔

ہدف کا سائز، فارمز اور غلطیاں

• ہدف کا سائز: WCAG 2.2 AA پوائنٹر ٹارگٹس کے لیے کم از کم 24 بائی 24 CSS پکسلز مانگتا ہے، یا چھوٹے اجزا کے گرد کافی جگہ (2.5.8)۔ فونز پر بڑا ہدف زیادہ آسان ہے۔
• فارمز: نظر آنے والے لیبلز (صرف placeholder نہیں)، واضح ہدایات، اور ایسے غلطی کے پیغامات جو بتائیں کہ کیا غلط ہے اور کیسے ٹھیک کریں، فیلڈ کے ساتھ۔
• لاگ ان: لوگوں کو پہیلی حل کرنے یا کوڈ نقل کرنے پر مجبور نہ کریں بغیر متبادل کے؛ پاس ورڈ مینیجرز اور paste کی اجازت دیں (3.3.8 Accessible Authentication)۔

کام کرنے والے پرامپٹس

اس سائٹ کو WCAG 2.2 Level AA پر پورا اتارنے کے لیے بنائیں: semantic HTML landmarks، ہر صفحے پر ایک h1 اور ترتیب سے ہیڈنگز، اصل button اور link عناصر، ہر فارم فیلڈ پر لیبل، نظر آنے والے focus styles، کم از کم 4.5:1 متن کنٹراسٹ، بامعنی تصاویر پر alt ٹیکسٹ اور سجاوٹی تصاویر پر alt=""، اور html lang سیٹ ہو۔

/signup اور /checkout صفحات کی رسائی آڈٹ کریں۔ صرف کی بورڈ استعمال، focus کی ترتیب، نظر آنے والا focus، لیبلز، غلطی کے پیغامات، کنٹراسٹ، اور آئیکن بٹنوں کے screen reader نام چیک کریں۔ ہر مسئلہ WCAG کے معیار کے ساتھ لکھیں، پھر بصری ڈیزائن کو ضرورت سے زیادہ بدلے بغیر درست کریں۔

موبائل مینیو کو کی بورڈ سے استعمال نہیں کیا جا سکتا۔ اسے aria-expanded والا بٹن بنائیں، کھلنے پر focus مینیو کے اندر لے جائیں، Escape سے بند کریں اور focus واپس بٹن پر لے جائیں۔

مرحلہ وار

1. خودکار چیک چلائیں۔ Chrome DevTools میں Lighthouse کا Accessibility سیکشن، یا axe براؤزر ایکسٹینشن، ہر اہم صفحے پر۔ جو کچھ وہ بتائے سب ٹھیک کریں۔
2. ماؤس ہٹا دیں۔ Tab دبا کر ہر صفحہ دیکھیں اور ہر اہم کام مکمل کریں، جیسے سائن اپ، تلاش، چیک آؤٹ۔ نوٹ کریں کہ کیا آپ تک نہیں پہنچ سکتے، جہاں focus نظر نہیں آتا، یا کہاں سے نکل نہیں سکتے۔
3. 200 فیصد زوم کریں اور ونڈو کو فون کی چوڑائی تک سکیڑیں۔ کچھ بھی کٹنا یا افقی اسکرول درکار نہیں ہونا چاہیے۔
4. دس منٹ screen reader آزمائیں: Mac اور iPhone پر VoiceOver، Android پر TalkBack، یا Windows پر NVDA (مفت)۔ ہیڈنگز، لنکس اور فارم فیلڈز سنیں۔ بغیر نام کا "Button"، یا "link, click here"، کام باقی ہونے کی علامت ہے۔
5. کنٹراسٹ چیک کریں متن، بٹنوں اور inputs کے لیے کنٹراسٹ چیکر سے۔
6. درست کریں، پھر وہی کام دوبارہ ٹیسٹ کریں۔
7. رسائی کا بیان شائع کریں جس میں لکھا ہو کہ آپ کون سا معیار ہدف بناتے ہیں اور مسائل کیسے رپورٹ کیے جائیں، اور ان رپورٹس کا جواب دیں۔

عام غلطیاں

• overlay ویجیٹ پر انحصار کوڈ درست کرنے کے بجائے۔
• focus outlines ہٹا دینا کیونکہ وہ بے ترتیب لگتے ہیں، اور ان کی جگہ کچھ نہ رکھنا۔
• placeholder متن کو واحد لیبل بنانا۔ کوئی لکھنا شروع کرے تو وہ غائب ہو جاتا ہے، اور اکثر کم کنٹراسٹ ہوتا ہے۔
• "یہاں کلک کریں" اور "مزید پڑھیں" لنکس۔ سیاق سے باہر، screen reader استعمال کرنے والے ایک جیسے لنکس کی فہرست سنتے ہیں۔
• کیورڈز سے بھرا alt ٹیکسٹ۔ alt ٹیکسٹ لوگوں کے لیے ہے؛ تصویر کو بیان کریں۔
• ایک بار ٹیسٹ کرنا۔ ہر نیا فیچر کی بورڈ رسائی توڑ سکتا ہے۔ اپنے لانچ سے پہلے ٹیسٹنگ میں کی بورڈ کا ایک مرحلہ شامل کریں۔

رسائی کی چیک لسٹ

• اہم صفحات پر خودکار چیک (Lighthouse یا axe) صاف
• ہر کام صرف کی بورڈ سے مکمل ہو سکتا ہے
• focus ہمیشہ نظر آئے اور sticky عناصر کے پیچھے نہ چھپے
• semantic ہیڈنگز، landmarks، بٹن اور لنکس؛ lang سیٹ
• بامعنی alt ٹیکسٹ؛ سجاوٹی تصاویر alt=""؛ ویڈیو پر captions
• متن کنٹراسٹ ≥ 4.5:1 (بڑا متن ≥ 3:1)؛ UI اجزا ≥ 3:1
• 200 فیصد زوم اور 320 px چوڑائی پر کام کرتا ہے
• ہر فارم فیلڈ کا نظر آنے والا لیبل اور واضح غلطی کے پیغامات
• رسائی کا بیان جس میں مسائل رپورٹ کرنے کا طریقہ ہو

ان تصورات کے پس منظر کے لیے ویب رسائی کیا ہے پڑھیں۔ قابل رسائی ڈیزائن اور اچھا ڈیزائن بہت حد تک ایک جیسے ہیں؛ بصری پہلو کے لیے AI سے اچھی نظر آنے والی ایپ کیسے ڈیزائن کریں دیکھیں۔

Mythex پر رسائی

Mythex آپ کی مانگی ہوئی کوئی بھی معیار کے ساتھ بناتا ہے، اس لیے اپنے پہلے پرامپٹ میں اور فالو اپ میں "WCAG 2.2 AA" لکھیں۔ آپ Preview کے فون سائز فریم سے چھوٹی اسکرینیں چیک کر سکتے ہیں (Preview اور Code)، لیکن کی بورڈ، زوم اور screen reader کے ٹیسٹ شائع شدہ URL یا الگ ٹیب میں کھلے preview پر سب سے بہتر کام کرتے ہیں۔ ایجنٹ سے کسی صفحے کا آڈٹ کروائیں، جو ملے اسے درست کروائیں، پھر خود درستیاں ٹیسٹ کریں؛ خودکار جانچ ایک آغاز ہے، حتمی منظوری نہیں۔

سوالات