مدد
لاگ ان کریں

تھیمز کے لیے ایکسیسیبلٹی

جب آپ اپنے تھیم کو کسٹمائز کرتے ہیں، تو ڈیزائن اور مواد کے ایسے انتخاب کریں جو آپ کے آن لائن سٹور کو قابل رسائی رکھنے میں مدد کریں۔ ایک قابل رسائی ویب سائٹ اس طرح ڈیزائن کی جاتی ہے کہ اسے ہر کوئی، بشمول معذور افراد، استعمال کر سکے۔ ایکسیسیبلٹی کو مدنظر رکھتے ہوئے اپنے آن لائن سٹور کے لیے انتخاب کرنا آپ کو اپنے تمام کسٹمرز کے لیے ایک جامع تجربہ فراہم کرنے میں مدد دے سکتا ہے۔

ذیل میں دی گئی گائیڈ لائنز کو Web Content Accessibility Guidelines (WCAG) کو ذہن میں رکھ کر بنایا گیا تھا۔ چونکہ ایک قابل رسائی ویب سائٹ بناتے وقت بہت سے عوامل پر غور کرنا ہوتا ہے، اس لیے صرف ذیل کی گائیڈ لائنز پر عمل کرنا اس بات کی ضمانت نہیں دیتا کہ آپ کا آن لائن سٹور مکمل طور پر قابل رسائی ہے۔ آپ WCAG کی ویب سائٹ ملاحظہ کر کے، یا ذیل میں دیئے گئے وسائل کو دیکھ کر ویب ایکسیسبیلٹی کے بارے میں مزید جان سکتے ہیں۔

اس صفحے پر

ٹیکسٹ کی ایکسیسبیلٹی

یہ ضروری ہے کہ آپ کے آن لائن سٹور کا ٹیکسٹ ان کسٹمرز کے لیے پڑھنے کے قابل ہو جو بینائی سے محروم ہیں یا جنہیں ٹیکسٹ کے گھنے بلاکس پڑھنے میں دشواری ہوتی ہے۔

کلر کنٹراسٹ

جب آپ اپنے آن لائن سٹور کے رنگوں میں ترمیم کرتے ہیں، تو یقینی بنائیں کہ آپ کا تمام ٹیکسٹ ان کسٹمرز کے لیے قابل رسائی ہو جو کلر بلائنڈ ہیں یا بصری طور پر معذور ہیں۔ یہ کسٹمرز ایک چیز کو دوسری چیز سے بصری طور پر الگ کرنے کے لیے مناسب کلر کنٹراسٹ پر انحصار کرتے ہیں۔ آپ اپنے سٹور کے مختلف حصوں کا کنٹراسٹ چیک کرنے کے لیے ایک آن لائن contrast ratio tool استعمال کر سکتے ہیں۔

ذیل کی مثال میں، ٹیکسٹ کا اپنے پس منظر کے مقابلے میں 2.4:1 کا کنٹراسٹ تناسب ہے، اور کچھ کسٹمرز کے لیے اسے پڑھنا مشکل ہے۔

ہلکے گرے ٹیکسٹ کا ایک بلاک اور ایک ٹھوس سفید پس منظر۔

اگلی مثال میں، ٹیکسٹ کا کنٹراسٹ تناسب 4.8:1 ہے، اور بہت سے کسٹمرز کے لیے اسے پڑھنا آسان ہے۔

ٹھوس سفید پس منظر پر گہرے گرے ٹیکسٹ کا ایک بلاک۔

باڈی ٹیکسٹ، ہیڈنگز، لنکس، اور فارم فیلڈز سمیت تمام ٹیکسٹ کا کنٹراسٹ ٹیسٹ کریں۔ درج ذیل گائیڈ لائنز استعمال کریں:

  • باڈی ٹیکسٹ اور بٹن کے ٹیکسٹ کے رنگ کا اپنے پس منظر سے کنٹراسٹ کا تناسب کم از کم 4.5:1 ہو۔
  • ہیڈنگز اور دیگر بڑے ٹیکسٹ (فونٹ سائز 24 px اور اس سے زیادہ) کے رنگ کا اپنے پس منظر سے کنٹراسٹ کا تناسب کم از کم 3:1 ہو۔
  • تصاویر پر موجود تمام ٹیکسٹ، بشمول سلائیڈ شوز، بینرز، اور ویڈیوز کے رنگ کا اپنے پس منظر سے مناسب کنٹراسٹ تناسب ہو۔ بڑے ٹیکسٹ (فونٹ سائز 24 px اور اس سے زیادہ) کے لیے، کنٹراسٹ کم از کم 3:1 ہو۔ چھوٹے ٹیکسٹ کے لیے کنٹراسٹ کم از کم 4.5:1 ہو۔
  • غیر ٹیکسٹ عناصر، بشمول ان پٹ بارڈرز اور آئیکنز کے رنگ کا اپنے پس منظر سے کنٹراسٹ کا تناسب کم از کم 3:1 ہو۔

ٹیکسٹ ہیڈنگز

جب آپ رچ ٹیکسٹ ایڈیٹر کے ساتھ اپنے صفحہ پر ہیڈنگز شامل کرتے ہیں، تو انہیں ترتیب وار (1 - 6) میں رکھنا ضروری ہے۔ صفحہ کا مواد کس طرح منظم ہے یہ بتانے کے لیے معاون ٹیکنالوجیز (assistive technologies) ہیڈنگز کا استعمال کرتی ہیں۔ لیولز کو چھوڑنا، جیسے کہ ہیڈنگ لیول 2 کے بعد ہیڈنگ لیول 4 کا آنا، صارفین کے لیے الجھن کا باعث بن سکتا ہے۔ درج ذیل گائیڈ لائن استعمال کریں:

  • ہیڈنگز کو ترتیب وار استعمال کیا جائے اور لیولز کو نہ چھوڑا جائے۔

ٹیکسٹ کا سائز اور الائنمنٹ

جب آپ اپنی تھیم کی ٹائپوگرافی سیٹنگز میں ترمیم کرتے ہیں، تو اس بات کو یقینی بنائیں کہ آپ کا ٹیکسٹ اتنا بڑا ہو کہ کسٹمرز اسے آسانی سے پڑھ سکیں۔

اسے پڑھنے میں آسان بنانے کے لیے ٹیکسٹ کے الفاظ اور حروف کے درمیان یکساں فاصلہ بھی ہونا چاہیے۔ ذیل کی مثال میں، ٹیکسٹ الائنمنٹ جسٹیفائیڈ ہے، جو الفاظ کے درمیان غیر یکساں فاصلہ پیدا کرتی ہے۔

جسٹیفائیڈ الائنمنٹ والے ٹیکسٹ کا ایک بلاک۔ ٹیکسٹ کی ہر لائن ایک سرے سے دوسرے سرے تک جگہ کو بھرتی ہے، اور اسے فٹ کرنے کے لیے الفاظ کے درمیان مختلف فاصلہ رکھنے پر مجبور کرتی ہے۔

اگلی مثال میں، ٹیکسٹ الائنمنٹ لیفٹ الائنڈ ہے، جو الفاظ کے درمیان یکساں فاصلہ پیدا کرتی ہے۔

لیفٹ الائنڈ ٹیکسٹ کا ایک بلاک۔ ہر لفظ کے درمیان یکساں فاصلہ ہے۔

ٹیکسٹ کے سائز اور الائنمنٹ کو کسٹمائز کرتے وقت، درج ذیل گائیڈ لائنز استعمال کریں:

  • باڈی ٹیکسٹ کے لیے کم از کم فونٹ سائز 16 px کے برابر ہو۔
  • ٹیکسٹ الائنمنٹ جسٹیفائیڈ نہ ہو۔ جسٹیفائیڈ ٹیکسٹ الفاظ کے درمیان غیر یکساں فاصلہ پیدا کرتا ہے۔

ٹیکسٹ لنکس

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

ٹیکسٹ لنکس اسی ٹیب میں کھلنے چاہئیں۔ نئے ٹیب یا ونڈو میں کھلنے والے لنکس الجھن کا باعث بن سکتے ہیں، خاص طور پر موبائل پر جہاں پرانی ونڈو نظر نہیں آتی، اور یہ کسٹمرز کے لیے جامع نہیں ہیں، خاص طور پر وہ کسٹمرز جو سکرین میگنیفکیشن کا استعمال کرتے ہیں یا کم تکنیکی مہارت رکھتے ہیں۔

اگر آپ اپنی تھیم کی سٹائل شیٹ میں ترمیم کرتے ہیں، تو یقینی بنائیں کہ آپ ٹیکسٹ لنک کے سٹائلز نہیں ہٹاتے ہیں۔ درج ذیل گائیڈ لائنز استعمال کریں:

  • ٹیکسٹ لنکس یا تو انڈر لائن ہوں یا ان میں کوئی اور بصری امتیاز ہو جو صرف رنگ تک محدود نہ ہو تاکہ کسٹمرز لنکس کو عام ٹیکسٹ سے الگ کر سکیں۔
  • کلک کرنے پر ٹیکسٹ لنکس اسی ٹیب میں کھلیں۔

تصاویر کے لیے متبادل ٹیکسٹ

جب آپ اپنے آن لائن سٹور میں تصاویر شامل کرتے ہیں، تو ان کسٹمرز کے لیے انہیں قابل رسائی بنانا ضروری ہے جو نابینا ہیں یا کمزور بینائی رکھتے ہیں۔ آپ متبادل ٹیکسٹ شامل کر کے ایسا کر سکتے ہیں جو ہر تصویر کو درست طریقے سے بیان کرتا ہو۔ وہ کسٹمرز جو سکرین ریڈرز استعمال کرتے ہیں، آپ کے آن لائن سٹور پر تصاویر کا مواد جاننے کے لیے آلٹ ٹیکسٹ (alt text) پر انحصار کرتے ہیں۔

آپ Shopify ایڈمن سے اپنی پروڈکٹ کی تصاویر میں آلٹ ٹیکسٹ شامل کر سکتے ہیں۔ آپ تھیم ایڈیٹر سے اپنی تھیم میں دیگر تصاویر میں آلٹ ٹیکسٹ شامل کر سکتے ہیں۔

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

بیک پیک پہنے ہوئے دو دوست ایک دوسرے کی کمر میں ہاتھ ڈالے سمندر کی طرف دیکھ رہے ہیں۔

ٹریول ایجنسی کے لیے، آپ اس ملک اور علاقے کا حوالہ دے سکتے ہیں جس میں دونوں دوست سفر کر رہے ہیں، اور اس سمندر یا بحیرہ کے نام کا جسے وہ دیکھ رہے ہیں۔ دوسری طرف، ایک آؤٹ ڈور ایکوئپمنٹ سٹور کے لیے، آپ دونوں دوستوں کے بیک پیکس کے برانڈز اور خصوصیات پر توجہ مرکوز کر سکتے ہیں۔

اگر آپ کا بزنس ایک ٹریول ایجنسی ہے، تو ناقص آلٹ ٹیکسٹ کی ایک مثال یہ ہو سکتی ہے، "سمندر کے سامنے دو لوگ۔" اسی ایجنسی کے لیے، اچھے آلٹ ٹیکسٹ کی مثال یہ ہو سکتی ہے، "Lagos, Portugal میں سفر کرنے والے دو دوست، جو دھوپ والے دن Praia do Camilo کے ریتلے ساحل کی طرف دیکھ رہے ہیں۔"

سلائیڈ شو اور ویڈیو کی ایکسیسبیلٹی

جب آپ اپنے آن لائن سٹور میں ویڈیو شامل کرتے ہیں، تو یقینی بنائیں کہ آپ کمزور بینائی والے کسٹمر، قوتِ سماعت سے محروم یا کم سننے والے کسٹمر، یا ایسے کسٹمر کی ضروریات پر غور کریں جو ویسٹیبلر ڈس آرڈرز کا شکار ہو سکتے ہیں۔

ان میں سے کچھ کسٹمر سکرین ریڈرز کی ٹیکسٹ ٹو سپیچ (text to speech) کیپیبلٹی پر انحصار کرتے ہیں، جو ویب پیج کا مواد پڑھ کر سناتے ہیں۔ ویڈیو اور موسیقی سے آنے والی اضافی آڈیو، خاص طور پر جب یہ غیر متوقع ہو، تو اس تجربے کو مشکل بنا سکتی ہے۔ قوتِ سماعت سے محروم یا کم سننے والے کسٹمر کے لیے، یہ ایک اچھا خیال ہے کہ آپ اپنی ویڈیو میں کلوزڈ کیپشنز (closed captions) شامل کریں تاکہ وہ کسٹمر اس مواد تک رسائی حاصل کر سکیں۔

ویسٹیبلر ڈس آرڈرز والے کسٹمر متحرک مواد کی وجہ سے چکر آنے کا شکار ہو سکتے ہیں۔ اس وجہ سے، یہ اہم ہے کہ سلائیڈ شو اور ویڈیو خود بخود پلے نہ ہوں اور کسٹمر کنٹرول بٹن کی مدد سے سلائیڈ شو کو کنٹرول کر سکے۔

سلائیڈ شو

جب آپ اپنے آن لائن سٹور میں سلائیڈ شو شامل کریں، تو درج ذیل گائیڈ لائن استعمال کریں:

  • سلائیڈ شو خود بخود پلے نہیں ہوتے ہیں۔
  • اگر سلائیڈ شو خود بخود پلے ہوتے ہیں، تو ان میں ایسے سلائیڈ شو کنٹرول شامل کریں جنہیں کسٹمر سلائیڈ شو کو پاز کرنے، آگے بڑھانے، یا روکنے کے لیے استعمال کر سکیں۔

ویڈیو

جب آپ اپنے آن لائن سٹور میں ویڈیو شامل کریں، تو درج ذیل گائیڈ لائن استعمال کریں:

  • ویڈیو خود بخود پلے نہیں ہوتی ہیں۔
  • اگر ویڈیو خود بخود پلے ہوتی ہیں، تو ان کی آڈیو میوٹ ہوتی ہے۔
  • آڈیو والی ویڈیو کے لیے، ویڈیو پوری طرح دکھائی دینی چاہیے اور پیج کے دیگر ایلیمنٹ سے بلاک نہیں ہونی چاہیے۔ اس سے کلوزڈ کیپشن نظر آتے رہتے ہیں۔
  • مکالمے پر مبنی ویڈیو کے لیے، ٹیکسٹ ٹرانسکرپٹ دستیاب ہونے چاہئیں۔ یہ یا تو اسی پیج پر، یا کسی الگ پیج کے لنک میں شامل ہوتے ہیں۔

یہ گائیڈ لائن سلائیڈ شو میں شامل ویڈیو پر بھی لاگو ہوتی ہیں۔

کی بورڈ کی سپورٹ

بصارت یا موٹر کی خرابی (motor impairment) والے کسٹمر آن لائن نیویگیٹ کرنے اور کام مکمل کرنے کے لیے کی بورڈ استعمال کر سکتے ہیں۔ یہ کسٹمر یہ جاننے کے لیے بصری اشارے (visual indicator) پر انحصار کرتے ہیں کہ ویب پیج پر ان کے کی بورڈ کا فوکس کہاں ہے۔ نیچے دی گئی مثال میں، ای میل فیلڈ میں بصری فوکس کا اشارہ ہے:

آن لائن سٹور پر ایک کسٹمر لاگ ان سکرین جو ای میل اور پاس ورڈ کے لیے فارم فیلڈ دکھاتی ہے۔ ای میل کی فیلڈ کو نیلے رنگ میں آؤٹ لائن کیا گیا ہے۔

اگر آپ اپنے تھیم کی سٹائل شیٹ میں ترمیم کرتے ہیں، تو یقینی بنائیں کہ آپ پیج کے کسی بھی ایلیمنٹ سے کی بورڈ فوکس کا سٹائل نہ ہٹائیں۔ درج ذیل گائیڈ لائن استعمال کریں:

  • تمام انٹرایکٹو پیج ایلیمنٹ میں واضح بصری اشارہ ہونا چاہیے جب ان پر کی بورڈ فوکس ہو۔ ان ایلیمنٹ میں لنک، بٹن، اور فارم فیلڈ شامل ہیں۔

وسائل

اس مضمون میں زیرِ بحث آنے والے عنوانات کے لیے ویب ایکسیسبیلٹی کے بارے میں مزید جاننے کے لیے، درج ذیل وسائل سے رجوع کریں۔

کلر کنٹراسٹ کے وسائل

  • Colors with Good Contrast، Web Accessibility Initiative کا ایک مضمون
  • Contrast Ratio، ایک آن لائن ٹول جسے آپ دو رنگوں کے درمیان کنٹراسٹ کی شرح تلاش کرنے کے لیے استعمال کر سکتے ہیں
  • Color Contrast Analyzer، ڈاؤن لوڈ کے لیے ایک کنٹراسٹ ریشو ایپلی کیشن جسے Paciello Group نے تیار کیا ہے

ٹیکسٹ کے وسائل

الٹرنیٹو ٹیکسٹ کے وسائل

سلائیڈ شو اور ویڈیو کے وسائل

کی بورڈ سپورٹ کے وسائل

اس سیکشن میں