ویب رسائی کا مطلب ہے ایسی ویب سائٹس بنانا جنہیں معذوری کے شکار لوگ مؤثر طریقے سے استعمال کر سکیں۔ اس میں وہ لوگ شامل ہیں جو اسکرین ریڈرز، صرف کی بورڈ نیویگیشن، آواز کے کنٹرول، اسکرین میگنیفائرز کا استعمال کرتے ہیں، یا جن کی رنگین بصارت میں محدودیت ہے۔ ورڈپریس کے ماحولیاتی نظام میں، رسائی بہت سے دائرہ اختیار میں قانونی ضرورت ہے اور وسیع تر سامعین تک پہنچنے کا عملی طریقہ ہے—دنیا بھر میں 1 بلین سے زیادہ لوگ کسی نہ کسی شکل کی معذوری کا شکار ہیں۔
اس رہنما میں، ہم آپ کی ورڈپریس سائٹ کو رسائی کے قابل بنانے کے عملی اقدامات کا احاطہ کرتے ہیں، ویب مواد کی رسائی کی رہنما خطوط (WCAG) 2.2 کے AA سطح کے مطابق—یہ وہ معیار ہے جو رسائی کے قوانین جیسے ADA (امریکہ)، EAA (یورپی یونین)، اور AODA (کینیڈا) کی طرف سے سب سے زیادہ عام طور پر درکار ہے۔
WCAG 2.2 کے اصولوں کو سمجھنا
WCAG چار اصولوں کے گرد منظم ہے، جنہیں POUR کہا جاتا ہے:
| اصول | اس کا مطلب | ورڈپریس کی مثالیں |
|---|---|---|
| محسوس کرنے کے قابل | صارفین مواد کو بصارت، سماعت، یا چھونے کے ذریعے محسوس کر سکتے ہیں | تصاویر کے لیے متبادل متن، ویڈیوز کے لیے کیپشن، کافی رنگ کا تضاد |
| عملی | صارفین انٹرفیس کے ساتھ نیویگیٹ اور تعامل کر سکتے ہیں | کی بورڈ نیویگیشن، چھوڑنے کے لنکس، کوئی کی بورڈ ٹریپ نہیں |
| سمجھنے کے قابل | صارفین مواد کو سمجھ سکتے ہیں اور انٹرفیس کا استعمال کیسے کریں | صاف زبان، مستقل نیویگیشن، غلطی کے پیغامات |
| مضبوط | مواد مختلف براؤزرز، آلات، اور معاون ٹیکنالوجیز پر کام کرتا ہے | صحیح HTML، مناسب ARIA کردار، معنوی مارک اپ |
رسائی کے قابل تھیم کا انتخاب
آپ کے ورڈپریس تھیم کی HTML ساخت اور CSS آپ کی سائٹ کی رسائی کی بنیاد بناتی ہے۔ جب ورڈپریس تھیم کا انتخاب کریں، تو ان رسائی کے عوامل کا اندازہ لگائیں:
- معنوی HTML: تھیم صحیح HTML5 عناصر (ہیڈر، نیویگیشن، مین، آرٹیکل، اسائیڈ، فوٹر) کا استعمال کرتا ہے نہ کہ ہر چیز کے لیے عمومی divs
- ہیڈنگ کی درجہ بندی: H1 → H2 → H3 منطقی ترتیب میں ہے بغیر کسی سطح کو چھوڑے
- چھوڑنے کے لنکس: "مواد پر جائیں" کا لنک پہلے قابل توجہ عنصر کے طور پر موجود ہے، جو کی بورڈ کے صارفین کو نیویگیشن کو چھوڑنے کی اجازت دیتا ہے
- کی بورڈ نیویگیشن: تمام تعامل کرنے والے عناصر (لنکس، بٹن، فارم) ٹیب کی مدد سے پہنچنے اور استعمال کرنے کے قابل ہیں
- فوکس کے اشارے: توجہ مرکوز عناصر کے پاس ایک نمایاں خاکہ یا ہائی لائٹ ہے (outline: none کے ساتھ ہٹا نہیں دیا گیا)
- رنگ کا تضاد: متن WCAG AA تضاد کے تناسب (عام متن کے لیے 4.5:1، بڑے متن کے لیے 3:1) پر پورا اترتا ہے
ورڈپریس.org پر "رسائی کے قابل" کے ٹیگ والے تھیمز نے ایک بنیادی رسائی کا جائزہ پاس کیا ہے۔ تاہم، یہ ٹیگ ایک ابتدائی نقطہ کی نشاندہی کرتا ہے، مکمل WCAG تعمیل نہیں۔ مقبول تھیمز میں، GeneratePress خاص طور پر اچھی طرح سے کوڈ کیا گیا ہے جس میں صاف معنوی HTML اور مناسب ARIA لینڈ مارکس ہیں۔
تصویر کی رسائی
متبادل متن
ہر اہم تصویر کو وضاحتی متبادل متن کی ضرورت ہوتی ہے۔ ورڈپریس اس کو آسان بناتا ہے—متبادل متن کا میدان میڈیا لائبریری میں اور مواد میں تصاویر داخل کرتے وقت دستیاب ہے۔
| تصویر کی قسم | متبادل متن کا طریقہ | مثال |
|---|---|---|
| پروڈکٹ کی تصویر | پروڈکٹ کی وضاحت کریں | "سونے کے بکل کے ساتھ سرخ چمڑے کا کراس باڈی بیگ، سامنے کا منظر" |
| اسکرین شاٹ | اسکرین شاٹ میں کیا دکھایا گیا ہے اس کی وضاحت کریں | "ورڈپریس ڈیش بورڈ جس میں 12 فعال پلگ ان کے ساتھ پلگ ان کا صفحہ دکھایا گیا ہے" |
| انفографک | اہم معلومات کا خلاصہ کریں | "موازنہ چارٹ: Elementor بمقابلہ Gutenberg کی خصوصیات۔ Elementor میں 100+ ویجٹس ہیں، Gutenberg میں 90+ بلاکس ہیں" |
| زیبائشی تصویر | خالی متبادل (alt="") | پس منظر کے نمونے، تقسیم کرنے والے، خالص طور پر زینتی آئیکن |
| چارٹ/گراف | رجحان یا اہم ڈیٹا پوائنٹ کی وضاحت کریں | "لکیری چارٹ جو ویب سائٹ کی ٹریفک کو جنوری سے دسمبر 2025 تک 45% بڑھتا ہوا دکھاتا ہے" |
رسائی کے لیے تصویر کی اصلاح
- متن کی تصاویر کا استعمال نہ کریں—اس کے بجائے CSS کے ساتھ اسٹائل کردہ اصل متن کا استعمال کریں
- یقینی بنائیں کہ تصاویر میں شامل متن تضاد کی ضروریات کو پورا کرتا ہے
- پیچیدہ تصاویر (چارٹس، ڈایاگرام) کے لیے طویل وضاحتیں فراہم کریں ایک قریبی پیراگراف یا longdesc خصوصیت کا استعمال کرتے ہوئے
- یقینی بنائیں کہ تصاویر کے پاس مناسب ابعاد ہیں تاکہ وہ لے آؤٹ کی تبدیلیوں (CLS) کا باعث نہ بنیں
کی بورڈ نیویگیشن
بہت سے صارفین ویب سائٹس کو مکمل طور پر نیویگیٹ کرتے ہیں
ایک کی بورڈ—آگے بڑھنے کے لیے Tab، پیچھے جانے کے لیے Shift+Tab، لنکس/بٹن کو فعال کرنے کے لیے Enter، چیک باکسز کو ٹوگل کرنے اور بٹن پر کلک کرنے کے لیے Space، اور موڈلز بند کرنے کے لیے Escape استعمال کریں۔
عام کی بورڈ کی رسائی کے مسائل
- فوکس کے پھندے: موڈل ڈائیلاگ جو مرکزی مواد کی طرف واپس جانے کی اجازت نہیں دیتے (موڈلز کو موڈل کے اندر فوکس کو پھنسانا چاہیے، اور Escape انہیں بند کرنا چاہیے)
- فوکس کے اشارے کی کمی: CSS جو فوکس شدہ عناصر پر ڈیفالٹ آؤٹ لائن کو ہٹا دیتی ہے (کبھی بھی *:focus { outline: none } کو عالمی طور پر استعمال نہ کریں)
- کلک ہینڈلرز کے ساتھ غیر تعاملاتی عناصر: Divs یا spans جن میں onClick ایونٹس ہیں جو کی بورڈ کے لیے قابل رسائی نہیں ہیں (اس کے بجائے بٹن یا لنکس استعمال کریں)
- ڈراپ ڈاؤن مینو جو صرف ہوور پر کھلتے ہیں: کی بورڈ کے صارفین ہوور کی حالت کو متحرک نہیں کر سکتے۔ مینو کو فوکس/Enter پر بھی کھلنا چاہیے
- ARIA کے بغیر حسب ضرورت اجزاء: ٹیبز، اکارڈینز، اور کیروسلز جو مناسب ARIA کرداروں اور کی بورڈ ہینڈلرز کے بغیر بنائے گئے ہیں
رنگ اور تضاد
WCAG AA ان کم از کم تضاد کے تناسب کی ضرورت ہے:
| عنصر | کم از کم تناسب | مثال (پاس) | مثال (ناکام) |
|---|---|---|---|
| عام متن (<18px) | 4.5:1 | #333 on #fff (12.6:1) | #999 on #fff (2.8:1) |
| بڑا متن (≥18px یا ≥14px بولڈ) | 3:1 | #555 on #fff (7.4:1) | #aaa on #fff (2.3:1) |
| UI اجزاء (بٹن، ان پٹ) | 3:1 | نیلا #2563eb بٹن (4.6:1) | ہلکا نیلا #93c5fd (1.8:1) |
| غیر متنی مواد (آئیکن، سرحدیں) | 3:1 | ہلکے پس منظر پر گہرا آئیکن | سفید پر ہلکا سرمئی آئیکن |
تضاد کے تناسب کی تصدیق کے لیے WebAIM کے Contrast Checker یا axe براؤزر توسیع جیسے ٹولز کا استعمال کریں۔ معلومات منتقل کرنے کے لیے صرف رنگ پر انحصار نہ کریں—رنگ کوڈنگ کے علاوہ متن کے لیبل، پیٹرن، یا آئیکن استعمال کریں۔
فارمز کی رسائی
فارمز رسائی کے لیے سب سے اہم شعبوں میں سے ایک ہیں۔ چاہے آپ Gutenberg blocks، Gravity Forms، یا WPForms استعمال کر رہے ہوں:
- ہر ان پٹ کا لیبل بنائیں: ہر ان پٹ کے ساتھ <label> عنصر کا استعمال کریں جو for/id ایٹریبیوٹ کے ذریعے منسلک ہو۔ پلیس ہولڈر ٹیکسٹ لیبلز کا متبادل نہیں ہے
- متعلقہ فیلڈز کو گروپ کریں: متعلقہ ان پٹس کے گروپ کے لیے <fieldset> اور <legend> کا استعمال کریں (جیسے، شپنگ ایڈریس کے فیلڈز)
- غلطی کے پیغامات فراہم کریں: جب توثیق ناکام ہو جائے تو یہ شناخت کریں کہ کون سا فیلڈ غلطی ہے اور اسے درست کرنے کا طریقہ بیان کریں۔ غلطی کے پیغامات کو ان کے فیلڈز کے ساتھ منسلک کرنے کے لیے aria-describedby کا استعمال کریں
- ضروری فیلڈز کی نشاندہی کریں: required ایٹریبیوٹ کا استعمال کریں اور بصری طور پر ضروری فیلڈز کو متن کے ساتھ اشارہ کریں (صرف ایک ستارہ نہیں)
- آٹو کمپلیٹ کی حمایت کریں: مناسب آٹو کمپلیٹ ایٹریبیوٹ شامل کریں (نام، ای میل، ٹیلیفون، ایڈریس لائن1) تاکہ براؤزرز فارم کے ڈیٹا کو خودکار طور پر بھر سکیں
مواد کی رسائی
ہیڈنگ کا ڈھانچہ
صحیح ہیڈنگ کی درجہ بندی اسکرین ریڈر کے صارفین کو صفحے کے ڈھانچے کو سمجھنے اور سیکشنز کے درمیان نیویگیٹ کرنے میں مدد کرتی ہے۔ قواعد:
- ہر صفحے کے لیے ایک H1 (صفحے/پوسٹ کا عنوان)
- اہم سیکشنز کے لیے H2
- H2 کے اندر ذیلی سیکشنز کے لیے H3
- لیولز کو کبھی نہ چھوڑیں (H2 → H4 بغیر H3 کے غلط ہے)
- بصری اسٹائلنگ کے لیے ہیڈنگز کا استعمال نہ کریں—اس کے بجائے CSS کلاسز کا استعمال کریں
لنک کا متن
جنرل لنک کے متن سے بچیں جو سیاق و سباق سے باہر بے معنی ہو:
| غیر معیاری لنک کا متن | قابل رسائی لنک کا متن |
|---|---|
| "یہاں کلک کریں" | "ورڈپریس سیکیورٹی گائیڈ پڑھیں" |
| "مزید پڑھیں" | "مکمل Elementor Pro کا جائزہ پڑھیں" |
| "مزید جانیں" | "WooCommerce چیک آؤٹ کو بہتر بنانے کا طریقہ سیکھیں" |
| "یہاں" | "پرفارمنس بینچ مارک رپورٹ ڈاؤن لوڈ کریں" |
ٹیبلز
ڈیٹا ٹیبلز میں شامل ہونا چاہیے:
- <thead> جس میں کالم کے ہیڈرز کے لیے <th> عناصر ہوں (scope="col" کے ساتھ)
- <th scope="row"> کے لیے صف کے ہیڈرز
- ٹیبل کے مقصد کی وضاحت کرنے والا <caption> عنصر
- سادہ ڈھانچہ—جب ممکن ہو تو ملے جلے خلیوں سے بچیں، کیونکہ یہ اسکرین ریڈرز کے لیے تشریح کرنا مشکل ہیں
اپنی سائٹ کی رسائی کی جانچ
| ٹول | قسم | یہ کیا جانچتا ہے |
|---|---|---|
| axe DevTools | براؤزر توسیع | خودکار WCA |
خودکار ٹولز تقریباً 30-50% رسائی کے مسائل کو پکڑ لیتے ہیں۔ کی بورڈ اور اسکرین ریڈر کے ساتھ دستی ٹیسٹنگ ضروری ہے تاکہ تعامل پر مبنی مسائل کی شناخت کی جا سکے جو خودکار ٹولز نہیں پکڑ سکتے۔
رسائی کے لیے ورڈپریس پلگ ان
- WP Accessibility: چھوڑنے کے لنکس شامل کرتا ہے، عام رسائی کے مسائل کو حل کرتا ہے، صارف کی ترجیحات کے لیے ٹول بار شامل کرتا ہے
- One Click Accessibility: ایک فرنٹ اینڈ رسائی ٹول بار شامل کرتا ہے (فونٹ کا سائز، تضاد، لنکس کی ہائی لائٹ)
- رسائی کے ساتھ ابتدائی سانچے: Astra اور GeneratePress دونوں کی بنیادی تھیمز میں مضبوط رسائی کی بنیادیں ہیں
نوٹ: رسائی کی اوورلے پلگ ان (جو "مرمت" کے بٹن کے ساتھ ایک تیرتا ہوا ویجیٹ شامل کرتے ہیں) رسائی کی کمیونٹی کی جانب سے بڑے پیمانے پر تنقید کا نشانہ بنتے ہیں۔ یہ کسی ویب سائٹ کو قابل رسائی نہیں بناتے—یہ ایک سطحی تہہ شامل کرتے ہیں جو دراصل معاون ٹیکنالوجی میں مداخلت کر سکتی ہے۔ اوورلے پر انحصار کرنے کے بجائے اپنی تھیم اور مواد میں رسائی کو شامل کرنے پر توجہ مرکوز کریں۔
مزید تفصیلات کے لیے، سرکاری دستاویزات کا حوالہ دیں: WCAG ہدایات, WordPress رسائی ٹیم.
اکثر پوچھے جانے والے سوالات
کیا ورڈپریس باکس سے باہر قابل رسائی ہے؟
ورڈپریس کا بنیادی حصہ رسائی میں نمایاں طور پر بہتری لایا ہے۔ ایڈمن پینل بڑی حد تک کی بورڈ نیویگیشن کے قابل ہے، اور بلاک ایڈیٹر میں ARIA لیبل شامل ہیں۔ تاہم، آپ کی سائٹ کی رسائی بڑی حد تک اس تھیم اور پلگ انز پر منحصر ہے جو آپ استعمال کرتے ہیں۔ ایک تھیم جس کی HTML ساخت خراب ہے وہ ورڈپریس کی بلٹ ان رسائی کی خصوصیات کو کمزور کرے گی۔
کیا مجھے قانونی طور پر ایک قابل رسائی ویب سائٹ کی ضرورت ہے؟
بہت سے دائرہ اختیار میں، جی ہاں۔ ADA (امریکہ)، یورپی رسائی ایکٹ (EU، جون 2025 سے مؤثر)، AODA (کینیڈا)، اور اسی طرح کے قوانین ویب سائٹس کو قابل رسائی ہونے کی ضرورت ہے۔ مخصوص ضروریات آپ کے مقام، کاروبار کی نوعیت، اور سامعین پر منحصر ہیں۔ اپنی صورتحال کے لیے مخصوص ضروریات کے لیے کسی قانونی پیشہ ور سے مشورہ کریں۔
کیا رسائی SEO پر اثر انداز ہوتی ہے؟
جی ہاں، یہاں نمایاں overlap ہے۔ مناسب ہیڈنگ کی ساخت، وضاحتی alt متن، معنوی HTML، تیز صفحہ لوڈنگ، اور موبائل دوستانہ ہونے سے رسائی اور SEO دونوں کو فائدہ ہوتا ہے۔ وہ سائٹس جو WCAG ہدایات کی پیروی کرتی ہیں بہتر درجہ بندی کرتی ہیں کیونکہ وہ بنیادی طور پر بہتر صارف کے تجربے فراہم کرتی ہیں۔ SEO کی بہترین طریقوں کے لیے، ہماری چیک لسٹ دیکھیں۔
کیا پیج بلڈرز قابل رسائی ویب سائٹس بنا سکتے ہیں؟
Elementor اور دیگر پیج بلڈرز قابل رسائی مواد تخلیق کر سکتے ہیں اگر صحیح طریقے سے استعمال کیا جائے۔ کلید یہ ہے کہ مناسب ہیڈنگ کی درجہ بندی کو یقینی بنانا، تصاویر کے لیے alt متن شامل کرنا، معنوی ویجٹس (بٹن کے بجائے اسٹائل شدہ divs) کا استعمال کرنا، اور کی بورڈ نیویگیشن کی جانچ کرنا۔ بلڈر خود رسائی کا تعین نہیں کرتا—آپ اسے کس طرح استعمال کرتے ہیں یہ کرتا ہے۔
ورڈپریس سائٹس پر سب سے عام رسائی کی غلطی کیا ہے؟
تصاویر پر غائب یا ناکافی alt متن سب سے زیادہ رپورٹ ہونے والی WCAG خلاف ورزی ہے۔ دوسری سب سے عام ناکافی رنگ کے تضاد ہے۔ دونوں کو درست کرنا آسان ہے—ان کے لیے توجہ اور مستقل مشق کی ضرورت ہوتی ہے نہ کہ تکنیکی مہارت کی۔
میں WooCommerce کو قابل رسائی کیسے بناؤں؟
WooCommerce کے ڈیفالٹ سانچوں میں معقول رسائی ہے۔ تصدیق کرنے کے لیے اہم شعبے: پروڈکٹ کی تصویر کا alt متن، چیک آؤٹ کے شعبوں پر فارم کے لیبل، کارٹ اور چیک آؤٹ کے عمل کی کی بورڈ نیویگیشن، اور فارم کی توثیق کی ناکامیوں کے لیے قابل رسائی غلطی کے پیغامات۔ ایک قابل رسائی تھیم کو بنیاد کے طور پر استعمال کرنا WooCommerce سے متعلق کام کی مقدار کو نمایاں طور پر کم کرتا ہے۔
قابل رسائی ورڈپریس سائٹس بنائیں
ایک قابل رسائی تھیم کی بنیاد سے شروع کریں۔ ہلکے پھلکے، اچھی طرح سے کوڈ شدہ تھیمز کو براؤز کریں جو معنوی HTML اور WCAG کی تعمیل کو ترجیح دیتے ہیں۔
قابل رسائی تھیمز براؤز کریں →
