22 KiB
ویب صفحات کو قابل رسائی بنانا
اسکیچ نوٹ از Tomomi Imura
لیکچر سے پہلے کا کوئز
ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر ہر کسی کے لیے رسائی ایک لازمی پہلو ہے۔
- سر ٹموتھی برنرز لی، W3C ڈائریکٹر اور ورلڈ وائڈ ویب کے موجد
یہ اقتباس ویب سائٹس کو قابل رسائی بنانے کی اہمیت کو بہترین انداز میں اجاگر کرتا ہے۔ ایک ایسی ایپلیکیشن جو سب کے لیے قابل رسائی نہ ہو، وہ بذات خود امتیازی ہے۔ بطور ویب ڈویلپرز ہمیں ہمیشہ قابل رسائی ہونے کو مدنظر رکھنا چاہیے۔ اگر آپ ابتدا سے ہی اس پر توجہ دیں گے تو آپ اس بات کو یقینی بنانے کے قریب ہوں گے کہ ہر کوئی آپ کے بنائے ہوئے صفحات تک رسائی حاصل کر سکے۔ اس سبق میں، آپ ان ٹولز کے بارے میں سیکھیں گے جو آپ کی ویب اثاثوں کو قابل رسائی بنانے میں مدد فراہم کرتے ہیں اور قابل رسائی ڈیزائن کے اصولوں کے ساتھ کام کرنے کا طریقہ۔
آپ یہ سبق Microsoft Learn پر لے سکتے ہیں!
استعمال کے لیے ٹولز
اسکرین ریڈرز
سب سے مشہور قابل رسائی ٹولز میں سے ایک اسکرین ریڈرز ہیں۔
اسکرین ریڈرز عام طور پر بصارت سے محروم افراد کے لیے استعمال کیے جانے والے کلائنٹس ہیں۔ جیسے ہم براؤزر کو صحیح طریقے سے معلومات پہنچانے پر وقت صرف کرتے ہیں، ہمیں یہ بھی یقینی بنانا چاہیے کہ اسکرین ریڈر بھی وہی معلومات درست طریقے سے پہنچائے۔
بنیادی طور پر، ایک اسکرین ریڈر صفحے کو اوپر سے نیچے تک آواز کے ذریعے پڑھتا ہے۔ اگر آپ کا صفحہ مکمل طور پر متن پر مشتمل ہے، تو ریڈر معلومات کو اسی انداز میں پہنچائے گا جیسے براؤزر کرتا ہے۔ لیکن ویب صفحات شاذ و نادر ہی صرف متن پر مشتمل ہوتے ہیں؛ ان میں لنکس، گرافکس، رنگ، اور دیگر بصری اجزاء شامل ہوتے ہیں۔ اس بات کو یقینی بنانے کے لیے احتیاط برتنی چاہیے کہ یہ معلومات اسکرین ریڈر کے ذریعے درست طریقے سے پڑھی جائے۔
ہر ویب ڈویلپر کو اسکرین ریڈر سے واقف ہونا چاہیے۔ جیسا کہ اوپر بیان کیا گیا ہے، یہ وہ کلائنٹ ہے جسے آپ کے صارفین استعمال کریں گے۔ جیسے آپ براؤزر کے کام کرنے کے طریقے سے واقف ہیں، آپ کو اسکرین ریڈر کے کام کرنے کے طریقے سے بھی واقف ہونا چاہیے۔ خوش قسمتی سے، زیادہ تر آپریٹنگ سسٹمز میں اسکرین ریڈرز شامل ہوتے ہیں۔
کچھ براؤزرز میں بھی بلٹ ان ٹولز اور ایکسٹینشنز موجود ہیں جو متن کو بلند آواز میں پڑھ سکتے ہیں یا کچھ بنیادی نیویگیشنل فیچرز فراہم کر سکتے ہیں، جیسے Edge براؤزر کے یہ قابل رسائی ٹولز۔ یہ بھی اہم قابل رسائی ٹولز ہیں، لیکن یہ اسکرین ریڈر ٹیسٹنگ ٹولز سے مختلف طریقے سے کام کرتے ہیں اور انہیں اسکرین ریڈر کے طور پر نہیں سمجھنا چاہیے۔
✅ اسکرین ریڈر اور براؤزر ٹیکسٹ ریڈر آزمائیں۔ ونڈوز پر Narrator ڈیفالٹ کے طور پر شامل ہے، اور JAWS اور NVDA بھی انسٹال کیے جا سکتے ہیں۔ macOS اور iOS پر، VoiceOver ڈیفالٹ کے طور پر انسٹال ہے۔
زوم
بصارت سے محروم افراد کے لیے عام طور پر استعمال ہونے والا ایک اور ٹول زومنگ ہے۔ زومنگ کی سب سے بنیادی قسم جامد زوم ہے، جسے Control + plus sign (+) یا اسکرین ریزولوشن کو کم کرکے کنٹرول کیا جاتا ہے۔ اس قسم کا زوم پورے صفحے کو دوبارہ سائز دیتا ہے، اس لیے Responsive Design کا استعمال بڑھتے ہوئے زوم لیولز پر اچھا صارف تجربہ فراہم کرنے کے لیے ضروری ہے۔
زومنگ کی ایک اور قسم خصوصی سافٹ ویئر پر انحصار کرتی ہے جو اسکرین کے ایک علاقے کو بڑا کرتا ہے اور پین کرتا ہے، بالکل حقیقی میگنیفائنگ گلاس کی طرح۔ ونڈوز پر، Magnifier بلٹ ان ہے، اور ZoomText ایک تھرڈ پارٹی میگنیفیکیشن سافٹ ویئر ہے جس میں زیادہ فیچرز اور بڑا صارف بیس ہے۔ macOS اور iOS دونوں میں بلٹ ان میگنیفیکیشن سافٹ ویئر موجود ہے جسے Zoom کہا جاتا ہے۔
کنٹراسٹ چیکرز
ویب سائٹس پر رنگوں کا انتخاب احتیاط سے کرنا ضروری ہے تاکہ رنگوں کے اندھے صارفین یا وہ لوگ جنہیں کم کنٹراسٹ والے رنگ دیکھنے میں دشواری ہوتی ہے، ان کی ضروریات پوری کی جا سکیں۔
✅ کسی ایسی ویب سائٹ کو آزمائیں جسے آپ استعمال کرنا پسند کرتے ہیں اور براؤزر ایکسٹینشن جیسے WCAG کا کلر چیکر کے ذریعے رنگوں کے استعمال کا تجزیہ کریں۔ آپ کیا سیکھتے ہیں؟
لائٹ ہاؤس
آپ کے براؤزر کے ڈویلپر ٹول ایریا میں، آپ کو لائٹ ہاؤس ٹول ملے گا۔ یہ ٹول کسی ویب سائٹ کی قابل رسائی (اور دیگر تجزیاتی) پہلوؤں کا ابتدائی جائزہ لینے کے لیے اہم ہے۔ اگرچہ صرف لائٹ ہاؤس پر انحصار کرنا مناسب نہیں ہے، لیکن 100% اسکور ایک مفید بنیاد فراہم کرتا ہے۔
✅ اپنے براؤزر کے ڈویلپر ٹول پینل میں لائٹ ہاؤس تلاش کریں اور کسی بھی سائٹ پر تجزیہ چلائیں۔ آپ کیا دریافت کرتے ہیں؟
قابل رسائی ڈیزائن کے اصول
قابل رسائی ہونا ایک نسبتاً بڑا موضوع ہے۔ آپ کی مدد کے لیے متعدد وسائل دستیاب ہیں۔
اگرچہ ہم قابل رسائی سائٹس بنانے کے ہر پہلو کو کور نہیں کر سکیں گے، نیچے کچھ بنیادی اصول دیے گئے ہیں جنہیں آپ نافذ کرنا چاہیں گے۔ ابتدا سے قابل رسائی صفحہ ڈیزائن کرنا ہمیشہ موجودہ صفحے کو قابل رسائی بنانے سے آسان ہوتا ہے۔
اچھے ڈسپلے کے اصول
رنگوں کے محفوظ پیلیٹس
لوگ دنیا کو مختلف طریقوں سے دیکھتے ہیں، اور اس میں رنگ بھی شامل ہیں۔ اپنی سائٹ کے لیے رنگوں کی اسکیم منتخب کرتے وقت، آپ کو یہ یقینی بنانا چاہیے کہ یہ سب کے لیے قابل رسائی ہو۔ رنگوں کے پیلیٹس بنانے کے لیے ایک بہترین ٹول Color Safe ہے۔
✅ ایسی ویب سائٹ کی نشاندہی کریں جو رنگوں کے استعمال میں بہت زیادہ مسائل پیدا کرتی ہو۔ کیوں؟
درست HTML کا استعمال
CSS اور JavaScript کے ساتھ، کسی بھی عنصر کو کسی بھی قسم کے کنٹرول کی طرح دکھانا ممکن ہے۔ <span> کو <button> بنانے کے لیے استعمال کیا جا سکتا ہے، اور <b> کو ہائپر لنک بنایا جا سکتا ہے۔ اگرچہ یہ اسٹائلنگ کے لیے آسان سمجھا جا سکتا ہے، لیکن یہ اسکرین ریڈر کو کچھ نہیں بتاتا۔ صفحے پر کنٹرولز بناتے وقت مناسب HTML کا استعمال کریں۔ اگر آپ کو ہائپر لنک چاہیے، تو <a> استعمال کریں۔ صحیح کنٹرول کے لیے صحیح HTML کا استعمال کرنا Semantic 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>
✅ عام طور پر، Semantic مارک اپ کا استعمال جیسا کہ اوپر بیان کیا گیا ہے، 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 کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔