22 KiB
ویب صفحات کو قابل رسائی بنانا
اسکیچ نوٹ: Tomomi Imura
لیکچر سے پہلے کا کوئز
ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر، ہر کسی کے لیے رسائی ایک لازمی پہلو ہے۔
- سر ٹموتھی برنرز لی، W3C کے ڈائریکٹر اور ورلڈ وائڈ ویب کے موجد
یہ قول ویب سائٹس کو قابل رسائی بنانے کی اہمیت کو بہترین انداز میں اجاگر کرتا ہے۔ ایک ایسی ایپلیکیشن جو سب کے لیے قابل رسائی نہ ہو، وہ بذات خود امتیازی ہے۔ بطور ویب ڈویلپرز، ہمیں ہمیشہ قابل رسائی ہونے کو مدنظر رکھنا چاہیے۔ اگر آپ ابتدا سے ہی اس پر توجہ دیں گے تو آپ اس بات کو یقینی بنانے کے قریب ہوں گے کہ آپ کے بنائے گئے صفحات سب کے لیے قابل رسائی ہوں۔ اس سبق میں، آپ ان ٹولز کے بارے میں سیکھیں گے جو آپ کی ویب اثاثوں کو قابل رسائی بنانے میں مدد فراہم کرتے ہیں اور قابل رسائی ہونے کو مدنظر رکھتے ہوئے کیسے تعمیر کیا جائے۔
آپ یہ سبق Microsoft Learn پر لے سکتے ہیں!
استعمال کے لیے ٹولز
اسکرین ریڈرز
قابل رسائی ٹولز میں سب سے زیادہ مشہور اسکرین ریڈرز ہیں۔
اسکرین ریڈرز عام طور پر بصارت سے محروم افراد کے لیے استعمال کیے جانے والے کلائنٹس ہیں۔ جیسے ہم وقت صرف کرتے ہیں کہ براؤزر معلومات کو صحیح طریقے سے پہنچائے، ہمیں یہ بھی یقینی بنانا ہوگا کہ اسکرین ریڈر بھی ایسا ہی کرے۔
بنیادی طور پر، ایک اسکرین ریڈر صفحے کو اوپر سے نیچے تک آواز کے ذریعے پڑھتا ہے۔ اگر آپ کا صفحہ مکمل طور پر متن پر مشتمل ہے، تو ریڈر معلومات کو اسی طرح پہنچائے گا جیسے براؤزر کرتا ہے۔ لیکن ویب صفحات شاذ و نادر ہی صرف متن پر مشتمل ہوتے ہیں؛ ان میں لنکس، گرافکس، رنگ، اور دیگر بصری اجزاء شامل ہوتے ہیں۔ اس بات کو یقینی بنانے کے لیے احتیاط برتنی چاہیے کہ یہ معلومات اسکرین ریڈر کے ذریعے صحیح طریقے سے پڑھی جائے۔
ہر ویب ڈویلپر کو اسکرین ریڈر سے واقف ہونا چاہیے۔ جیسا کہ اوپر ذکر کیا گیا ہے، یہ وہ کلائنٹ ہے جسے آپ کے صارفین استعمال کریں گے۔ جیسے آپ براؤزر کے کام کرنے کے طریقے سے واقف ہیں، آپ کو اسکرین ریڈر کے کام کرنے کے طریقے سے بھی واقف ہونا چاہیے۔ خوش قسمتی سے، زیادہ تر آپریٹنگ سسٹمز میں اسکرین ریڈرز شامل ہوتے ہیں۔
کچھ براؤزرز میں بھی بلٹ ان ٹولز اور ایکسٹینشنز موجود ہیں جو متن کو بلند آواز میں پڑھ سکتے ہیں یا کچھ بنیادی نیویگیشن فیچرز فراہم کر سکتے ہیں، جیسے Edge براؤزر کے یہ قابل رسائی ٹولز۔ یہ بھی اہم قابل رسائی ٹولز ہیں، لیکن یہ اسکرین ریڈر ٹیسٹنگ ٹولز سے مختلف طریقے سے کام کرتے ہیں اور انہیں اسکرین ریڈر کے طور پر غلط نہیں سمجھنا چاہیے۔
✅ اسکرین ریڈر اور براؤزر ٹیکسٹ ریڈر آزمائیں۔ ونڈوز پر Narrator ڈیفالٹ کے طور پر شامل ہے، اور JAWS اور NVDA بھی انسٹال کیے جا سکتے ہیں۔ macOS اور iOS پر، VoiceOver ڈیفالٹ کے طور پر انسٹال ہے۔
زوم
بصارت سے محروم افراد کے ذریعہ عام طور پر استعمال ہونے والا ایک اور ٹول زومنگ ہے۔ زومنگ کی سب سے بنیادی قسم جامد زوم ہے، جسے Control + plus sign (+) یا اسکرین ریزولوشن کو کم کرکے کنٹرول کیا جاتا ہے۔ اس قسم کا زوم پورے صفحے کو دوبارہ سائز دیتا ہے، لہذا جوابی ڈیزائن کا استعمال بڑھتے ہوئے زوم لیولز پر اچھا صارف تجربہ فراہم کرنے کے لیے اہم ہے۔
زومنگ کی ایک اور قسم خصوصی سافٹ ویئر پر انحصار کرتی ہے جو اسکرین کے ایک علاقے کو بڑا کرتا ہے اور پین کرتا ہے، بالکل حقیقی میگنیفائنگ گلاس کی طرح۔ ونڈوز پر، Magnifier بلٹ ان ہے، اور ZoomText ایک تھرڈ پارٹی میگنیفیکیشن سافٹ ویئر ہے جس میں زیادہ خصوصیات اور بڑا صارف بیس ہے۔ macOS اور iOS دونوں میں ایک بلٹ ان میگنیفیکیشن سافٹ ویئر ہے جسے Zoom کہا جاتا ہے۔
کنٹراسٹ چیکرز
ویب سائٹس پر رنگوں کو احتیاط سے منتخب کرنے کی ضرورت ہے تاکہ رنگوں کے اندھے صارفین یا وہ لوگ جنہیں کم کنٹراسٹ والے رنگ دیکھنے میں دشواری ہوتی ہے، ان کی ضروریات پوری کی جا سکیں۔
✅ کسی ایسی ویب سائٹ کو آزمائیں جسے آپ استعمال کرنا پسند کرتے ہیں اور براؤزر ایکسٹینشن جیسے WCAG کا کلر چیکر کے ذریعے رنگوں کا تجزیہ کریں۔ آپ کیا سیکھتے ہیں؟
لائٹ ہاؤس
آپ کے براؤزر کے ڈویلپر ٹول ایریا میں، آپ کو لائٹ ہاؤس ٹول ملے گا۔ یہ ٹول کسی ویب سائٹ کی قابل رسائی (اور دیگر تجزیہ) کا پہلا جائزہ حاصل کرنے کے لیے اہم ہے۔ اگرچہ صرف لائٹ ہاؤس پر انحصار کرنا ضروری نہیں ہے، لیکن 100% اسکور ایک مفید بنیاد فراہم کرتا ہے۔
✅ اپنے براؤزر کے ڈویلپر ٹول پینل میں لائٹ ہاؤس تلاش کریں اور کسی بھی سائٹ پر تجزیہ چلائیں۔ آپ کیا دریافت کرتے ہیں؟
قابل رسائی ڈیزائننگ
قابل رسائی ایک نسبتاً بڑا موضوع ہے۔ آپ کی مدد کے لیے، متعدد وسائل دستیاب ہیں۔
اگرچہ ہم قابل رسائی سائٹس بنانے کے ہر پہلو کا احاطہ نہیں کر سکیں گے، نیچے کچھ بنیادی اصول دیے گئے ہیں جنہیں آپ نافذ کرنا چاہیں گے۔ ابتدا سے ایک قابل رسائی صفحہ ڈیزائن کرنا ہمیشہ موجودہ صفحے کو قابل رسائی بنانے کے لیے واپس جانے سے آسان ہے۔
اچھے ڈسپلے اصول
رنگوں کے محفوظ پیلیٹس
لوگ دنیا کو مختلف طریقوں سے دیکھتے ہیں، اور اس میں رنگ بھی شامل ہیں۔ اپنی سائٹ کے لیے رنگ سکیم منتخب کرتے وقت، آپ کو یہ یقینی بنانا چاہیے کہ یہ سب کے لیے قابل رسائی ہو۔ رنگ پیلیٹس بنانے کے لیے ایک بہترین ٹول Color Safe ہے۔
✅ ایسی ویب سائٹ کی شناخت کریں جو رنگوں کے استعمال میں بہت زیادہ مسئلہ پیدا کرتی ہو۔ کیوں؟
صحیح HTML کا استعمال کریں
CSS اور جاوا اسکرپٹ کے ساتھ، کسی بھی عنصر کو کسی بھی قسم کے کنٹرول کی طرح دکھانا ممکن ہے۔ <span> کو <button> بنانے کے لیے استعمال کیا جا سکتا ہے، اور <b> کو ہائپر لنک بنایا جا سکتا ہے۔ اگرچہ یہ اسٹائل کرنے میں آسان سمجھا جا سکتا ہے، لیکن یہ اسکرین ریڈر کو کچھ نہیں بتاتا۔ صفحے پر کنٹرولز بناتے وقت مناسب HTML کا استعمال کریں۔ اگر آپ ہائپر لنک چاہتے ہیں، تو <a> استعمال کریں۔ صحیح کنٹرول کے لیے صحیح HTML کا استعمال کرنا سیمینٹک HTML کا استعمال کہلاتا ہے۔
✅ کسی بھی ویب سائٹ پر جائیں اور دیکھیں کہ آیا ڈیزائنرز اور ڈویلپرز HTML کو صحیح طریقے سے استعمال کر رہے ہیں۔ کیا آپ کو کوئی ایسا بٹن ملتا ہے جو لنک ہونا چاہیے؟ اشارہ: اپنے براؤزر میں 'View Page Source' منتخب کرنے کے لیے دائیں کلک کریں اور بنیادی کوڈ دیکھیں۔
وضاحتی ہیڈنگ ہائیرارکی بنائیں
اسکرین ریڈر صارفین ہیڈنگز پر بہت زیادہ انحصار کرتے ہیں معلومات تلاش کرنے اور صفحے پر نیویگیٹ کرنے کے لیے۔ وضاحتی ہیڈنگ مواد لکھنا اور سیمینٹک ہیڈنگ ٹیگز کا استعمال اسکرین ریڈر صارفین کے لیے آسانی سے نیویگیٹ کرنے والی سائٹ بنانے کے لیے اہم ہے۔
اچھے بصری اشارے استعمال کریں
CSS صفحے پر کسی بھی عنصر کی شکل پر مکمل کنٹرول فراہم کرتا ہے۔ آپ آؤٹ لائن کے بغیر ٹیکسٹ باکسز یا انڈر لائن کے بغیر ہائپر لنکس بنا سکتے ہیں۔ بدقسمتی سے ان اشاروں کو ہٹانے سے کسی ایسے شخص کے لیے چیلنجنگ ہو سکتا ہے جو ان پر انحصار کرتا ہے تاکہ کنٹرول کی قسم کو پہچان سکے۔
لنک ٹیکسٹ کی اہمیت
ہائپر لنکس ویب کو نیویگیٹ کرنے کے لیے بنیادی ہیں۔ نتیجتاً، اس بات کو یقینی بنانا کہ اسکرین ریڈر لنکس کو صحیح طریقے سے پڑھ سکے، تمام صارفین کو آپ کی سائٹ پر نیویگیٹ کرنے کی اجازت دیتا ہے۔
اسکرین ریڈرز اور لنکس
جیسا کہ آپ توقع کریں گے، اسکرین ریڈرز لنک ٹیکسٹ کو اسی طرح پڑھتے ہیں جیسے وہ صفحے پر موجود کسی دوسرے متن کو پڑھتے ہیں۔ اس بات کو مدنظر رکھتے ہوئے، نیچے دکھایا گیا متن بالکل قابل قبول محسوس ہو سکتا ہے۔
چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔ یہاں کلک کریں مزید معلومات کے لیے۔
چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔ مزید معلومات کے لیے https://en.wikipedia.org/wiki/Little_penguin ملاحظہ کریں۔
نوٹ جیسا کہ آپ پڑھنے والے ہیں، آپ کو کبھی بھی ایسے لنکس نہیں بنانے چاہئیں جو اوپر کی طرح نظر آئیں۔
یاد رکھیں، اسکرین ریڈرز براؤزرز سے مختلف انٹرفیس ہیں جن میں مختلف خصوصیات کا سیٹ ہوتا ہے۔
URL استعمال کرنے کا مسئلہ
اسکرین ریڈرز متن کو پڑھتے ہیں۔ اگر متن میں URL ظاہر ہوتا ہے، تو اسکرین ریڈر URL کو پڑھے گا۔ عام طور پر، URL معنی خیز معلومات فراہم نہیں کرتا، اور پریشان کن لگ سکتا ہے۔ آپ نے یہ تجربہ کیا ہوگا اگر آپ کے فون نے کبھی کسی ٹیکسٹ میسج کو آواز کے ساتھ پڑھا ہو جس میں URL ہو۔
"یہاں کلک کریں" کا مسئلہ
اسکرین ریڈرز کے پاس صفحے پر صرف ہائپر لنکس پڑھنے کی صلاحیت بھی ہوتی ہے، بالکل اسی طرح جیسے کوئی دیکھنے والا شخص لنکس کے لیے صفحے کو اسکین کرے گا۔ اگر لنک ٹیکسٹ ہمیشہ "یہاں کلک کریں" ہو، تو صارف صرف "یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، ..." سنے گا۔ اب تمام لنکس ایک دوسرے سے الگ نہیں ہیں۔
اچھا لنک ٹیکسٹ
اچھا لنک ٹیکسٹ مختصراً بیان کرتا ہے کہ لنک کے دوسری طرف کیا ہے۔ اوپر دیے گئے مثال میں چھوٹے پینگوئنز کے بارے میں بات کرتے ہوئے، لنک اس نسل کے بارے میں ویکیپیڈیا صفحے پر ہے۔ چھوٹے پینگوئنز کا فقرہ بہترین لنک ٹیکسٹ کے لیے موزوں ہوگا کیونکہ یہ واضح کرتا ہے کہ اگر کوئی لنک پر کلک کرے تو وہ کیا سیکھے گا - چھوٹے پینگوئنز۔
چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔
✅ چند منٹ کے لیے ویب پر سرف کریں اور ایسے صفحات تلاش کریں جو مبہم لنکنگ حکمت عملی استعمال کرتے ہیں۔ ان کا موازنہ دیگر، بہتر لنک شدہ سائٹس سے کریں۔ آپ کیا سیکھتے ہیں؟
سرچ انجن کے نوٹس
سب کے لیے اپنی سائٹ کو قابل رسائی بنانے کو یقینی بنانے کے اضافی فائدے کے طور پر، آپ سرچ انجنز کو اپنی سائٹ پر نیویگیٹ کرنے میں بھی مدد کریں گے۔ سرچ انجنز لنک ٹیکسٹ کا استعمال صفحات کے موضوعات سیکھنے کے لیے کرتے ہیں۔ لہذا اچھا لنک ٹیکسٹ استعمال کرنا سب کے لیے مددگار ہے!
ARIA
ذیل میں دیے گئے صفحے کا تصور کریں:
| پروڈکٹ | تفصیل | آرڈر |
|---|---|---|
| وِجٹ | تفصیل | آرڈر |
| سپر وِجٹ | تفصیل | آرڈر |
اس مثال میں، تفصیل اور آرڈر کے متن کو دہرانا براؤزر استعمال کرنے والے کے لیے معنی خیز ہے۔ تاہم، اسکرین ریڈر استعمال کرنے والے کو صرف تفصیل اور آرڈر کے الفاظ بغیر سیاق و سباق کے سنائی دیں گے۔
ایسے منظرناموں کی حمایت کرنے کے لیے، HTML ایک سیٹ کی خصوصیات کی حمایت کرتا ہے جسے Accessible Rich Internet Applications (ARIA) کہا جاتا ہے۔ یہ خصوصیات اسکرین ریڈرز کو اضافی معلومات فراہم کرنے کی اجازت دیتی ہیں۔
نوٹ: HTML کے بہت سے پہلوؤں کی طرح، براؤزر اور اسکرین ریڈر کی حمایت مختلف ہو سکتی ہے۔ تاہم، زیادہ تر مین لائن کلائنٹس ARIA خصوصیات کی حمایت کرتے ہیں۔
آپ aria-label کا استعمال لنک کی وضاحت کے لیے کر سکتے ہیں جب صفحے کی فارمیٹ اس کی اجازت نہیں دیتی۔ وِجٹ کے لیے تفصیل کو اس طرح سیٹ کیا جا سکتا ہے:
<a href="#" aria-label="Widget description">description</a>
✅ عام طور پر، اوپر بیان کردہ سیمینٹک مارک اپ کا استعمال ARIA کے استعمال پر فوقیت رکھتا ہے، لیکن کبھی کبھی مختلف HTML ویجٹس کے لیے کوئی سیمینٹک متبادل نہیں ہوتا۔ ایک اچھا مثال درخت ہے۔ درخت کے لیے کوئی HTML متبادل نہیں ہے، لہذا آپ اس عنصر کے لیے عمومی <div> کو مناسب رول اور ARIA ویلیوز کے ساتھ شناخت کرتے ہیں۔ MDN کی ARIA پر دستاویزات میں مزید مفید معلومات موجود ہیں۔
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
تصاویر
یہ کہنا ضروری نہیں کہ اسکرین ریڈرز خود بخود یہ نہیں پڑھ سکتے کہ تصویر میں کیا ہے۔ تصاویر کو قابل رسائی بنانا زیادہ محنت نہیں لیتا - یہی alt وصف کے بارے میں ہے۔ تمام معنی خیز تصاویر کو یہ بیان کرنے کے لیے alt ہونا چاہیے کہ وہ کیا ہیں۔
جو تصاویر صرف سجاوٹی ہیں، ان کے alt وصف کو خالی سٹرنگ پر سیٹ کیا جانا چاہیے: alt=""۔ یہ اسکرین ریڈرز کو سجاوٹی تصویر کا غیر ضروری اعلان کرنے سے روکتا ہے۔
✅ جیسا کہ آپ توقع کر سکتے ہیں، سرچ انجن بھی یہ نہیں سمجھ سکتے کہ تصویر میں کیا ہے۔ وہ بھی alt ٹیکسٹ کا استعمال کرتے ہیں۔ لہذا ایک بار پھر، اپنی صفحے کو قابل رسائی بنانا اضافی فوائد فراہم کرتا ہے!
کی بورڈ
کچھ صارفین ماؤس یا ٹریک پیڈ استعمال کرنے سے قاصر ہوتے ہیں، بلکہ کی بورڈ کے تعاملات پر انحصار کرتے ہیں تاکہ ایک عنصر سے دوسرے عنصر تک ٹیب کریں۔ یہ ضروری ہے کہ آپ کی ویب سائٹ آپ کے مواد کو منطقی ترتیب میں پیش کرے تاکہ کی بورڈ صارف ہر انٹرایکٹو عنصر تک رسائی حاصل کر سکے جب وہ دستاویز میں نیچے جائیں۔ اگر آپ اپنے ویب صفحات کو سیمینٹک مارک اپ کے ساتھ بناتے ہیں اور ان کے بصری لے آؤٹ کو اسٹائل کرنے کے لیے CSS کا استعمال کرتے ہیں، تو آپ کی سائٹ کی بورڈ نیویگیبل ہونی چاہیے، لیکن اس پہلو کو دستی طور پر جانچنا ضروری ہے۔ کی بورڈ نیویگیشن کی حکمت عملیوں کے بارے میں مزید جانیں۔
✅ کسی بھی ویب سائٹ پر جائیں اور صرف اپنے کی بورڈ کا استعمال کرتے ہوئے اس کے ذریعے نیویگیٹ کرنے کی کوشش کریں۔ کیا کام کرتا ہے، کیا کام نہیں کرتا؟ کیوں؟
خلاصہ
ایک ویب جو بہت سی حکومتوں نے رسائی کے تقاضوں کے حوالے سے قوانین بنائے ہیں۔ اپنے ملک کے رسائی کے قوانین کے بارے میں معلومات حاصل کریں۔ کیا شامل ہے اور کیا نہیں؟ ایک مثال یہ حکومتی ویب سائٹ ہے۔
اسائنمنٹ
ایک غیر قابل رسائی ویب سائٹ کا تجزیہ کریں
کریڈٹس: Turtle Ipsum از Instrument
ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔