ویب سائٹ سجیلا نظر آتی ہے اور ماؤس کے ساتھ بالکل کام کرتی ہے، لیکن پھر بھی کچھ لوگوں کے لیے اسے استعمال کرنا مشکل ہو سکتا ہے۔
فارم صرف ایک اشارے کے طور پر رنگ استعمال کر سکتے ہیں کہ کوئی مسئلہ پیش آیا ہے۔ ایک چسپاں ہیڈر اس عنصر کو مکمل طور پر ڈھانپ سکتا ہے جس پر فی الحال کی بورڈ فوکس ہے۔ اپنے لاگ ان فارم میں، آپ صارفین کو ان کے پاس ورڈ مینیجر سے پاس ورڈ چسپاں کرنے سے روک سکتے ہیں۔ یا، جب آپ ماؤس سے کلک کرتے ہیں تو آپ کا حسب ضرورت بٹن کام کر سکتا ہے، لیکن جب آپ کی بورڈ استعمال کرتے ہیں تو کچھ نہ کریں۔
یہ ایک ترقیاتی فیصلہ ہے، نہ صرف ایک مسئلہ جو کہ رسائی کے آڈٹ کے دوران ظاہر ہوتا ہے۔
ویب مواد تک رسائی کے رہنما خطوط (WCAG) ان میں سے بہت سی رکاوٹوں کی شناخت اور ان کو کم کرنے کے لیے عام معیار فراہم کرتے ہیں۔ WCAG 2.2 WCAG 2 کی تازہ ترین سفارش ہے، اور ورلڈ وائڈ ویب کنسورشیم (W3C) تجویز کرتا ہے کہ جب بھی ممکن ہو ڈویلپرز اور تنظیمیں WCAG 2.2 کا استعمال کریں۔
یہ مضمون ڈبلیو سی اے جی 2.2 لیول A اور AA کی ضروریات پر توجہ مرکوز کرتا ہے جو اکثر سامنے کی ترقی کو متاثر کرتے ہیں۔ مقصد یہ بتانا ہے کہ کس طرح رسائی کے تقاضے سامنے والے ترقیاتی فیصلوں سے جڑے ہوئے ہیں۔
انڈیکس
WCAG 2.2 کیا ہے؟
ڈبلیو سی اے جی ویب مواد تک رسائی کے رہنما خطوط. W3C ایسے معیارات تیار کرتا ہے جو یہ بیان کرتے ہیں کہ معذور افراد کے لیے ویب مواد کو مزید قابل رسائی کیسے بنایا جائے۔
WCAG 2.2 تقاضوں کو اصولوں، رہنما خطوط اور قابل امتحان کامیابی کے معیار میں ترتیب دیتا ہے۔ کامیابی کا معیار ٹیکنالوجی سے آزاد ہے۔ یہ اہم ہے کیونکہ WCAG خاص طور پر ایچ ٹی ایم ایل، ری ایکٹ، ورڈپریس، یا کسی اور نفاذ ٹیکنالوجی کے لیے موجود نہیں ہے۔
درج ذیل درجہ بندی پر غور کریں:
Principle: Operable
Guideline 2.1: Keyboard Accessible
Success Criterion 2.1.1: Keyboard
یہ اصول وسیع رسائی کے اہداف فراہم کرتے ہیں۔ رہنما خطوط اس مقصد کو محدود کرتے ہیں، اور کامیابی کے معیار قابل امتحان تقاضے فراہم کرتے ہیں۔
W3C وسائل بھی شائع کرتا ہے جیسے کہ WCAG 2.2 کو سمجھنا، WCAG 2.2 کو کیسے پورا کریں، اور WCAG 2.2 ٹیکنالوجیز۔ یہ وسائل کامیابی کے معیار کو بیان کرتے ہیں اور عمل درآمد کے طریقے، مثالیں اور معلوم ناکامیاں فراہم کرتے ہیں۔ یہ نسخہ WCAG کی ضروریات کا حصہ نہیں ہے لیکن معلومات کے لیے فراہم کی گئی ہے۔
W3C کی تفصیل معیار کو پورا کرنے کا ایک قبول شدہ طریقہ دکھا سکتی ہے، لیکن WCAG کو عام طور پر اس درست تکنیک کے استعمال کی ضرورت نہیں ہوتی ہے۔ دیگر نفاذات بھی درست ہو سکتے ہیں اگر وہ کامیابی کے حقیقی معیار پر پورا اترتے ہیں۔
WCAG موافقت کیسے کام کرتی ہے۔
WCAG مطابقت کی تین سطحوں کی وضاحت کرتا ہے: A, A.A. اور اے اے اے.
سطحیں ایک دوسرے پر بنتی ہیں۔ ایک صفحہ صرف AA کے نشان والے معیار پر پورا اتر کر لیول AA کی تعمیل کا دعویٰ نہیں کر سکتا۔ تمام قابل اطلاق لیول A اور لیول AA کامیابی کے معیار پر پورا اترنا چاہیے۔ اسی طرح سطح AAA میں A, AA، اور AAA کی ضروریات شامل ہیں۔
یہ تفریق اہم ہے کیونکہ رسائی کی بات چیت بعض اوقات WCAG کو انفرادی جانچ میں کم کر دیتی ہے۔
آپ مینو کے کی بورڈ کے تعامل میں ترمیم کر سکتے ہیں، تصاویر میں متبادل آئٹمز شامل کر سکتے ہیں، اور متعدد کنٹراسٹ مسائل کو حل کر سکتے ہیں۔ اگرچہ یہ ایک مفید قابل رسائی بہتری ہے، لیکن یہ خود بخود آپ کی پوری ویب سائٹ "WCAG AA کے مطابق” نہیں بناتی ہے۔
WCAG وضاحتیں پورے ویب صفحات پر لاگو ہوتی ہیں۔ اگر کسی عمل کو مکمل کرنے کے لیے متعدد صفحات کی ضرورت ہوتی ہے، جیسے کہ چیک آؤٹ کا عمل، تو اس عمل میں تمام صفحات کو چارج شدہ لیول کی تعمیل کرنی چاہیے۔
لہذا، اس مضمون میں دی گئی مثالیں یہ بتاتی ہیں کہ کس طرح مخصوص رسائی کی ضروریات کو پورا کیا جائے۔ یہ پوری درخواست کے لیے موزوں ہونے کا دعویٰ نہیں کرتا۔
WCAG کے چار اصول کیسے کام کرتے ہیں۔
ڈبلیو سی اے جی اپنے رہنما خطوط کو چار اصولوں کے مطابق گروپ کرتا ہے، جنہیں عام طور پر ان کے مخففات سے یاد کیا جاتا ہے: ڈالو: قابل ادراک، قابل عمل، قابل فہم، مضبوط۔
قابل فہم اس کا مطلب ہے کہ صارفین کو آپ کی فراہم کردہ معلومات کو پہچاننے کے قابل ہونا چاہیے۔ متن کا متبادل، کیپشن، کنٹراسٹ، اور انکولی لے آؤٹ اس اصول کے تحت آتے ہیں۔
قابل عمل یہ اس بارے میں ہے کہ لوگ انٹرفیس کے ساتھ کس طرح تعامل کرتے ہیں۔ مثالوں میں کی بورڈ آپریشن، فوکس برتاؤ، نیویگیشن، پوائنٹر کا تعامل، اور ٹائمنگ شامل ہیں۔
قابل فہم یہ اس بات سے متعلق ہے کہ آیا صارف معلومات کو سمجھ سکتے ہیں اور انٹرفیس کیسے کام کرتا ہے۔ اس میں فارم کی ہدایات، کارآمد غلطی کے پیغامات، قابل پیشن گوئی انٹرفیس، اور قابل رسائی تصدیق شامل ہے۔
مضبوط یہ اس بارے میں ہے کہ آیا براؤزر اور معاون ٹیکنالوجیز مواد کی صحیح تشریح کر سکتی ہیں۔ سیمنٹک ایچ ٹی ایم ایل، قابل رسائی نام، کردار، اقدار اور ریاست اس اصول کے مرکز میں ہیں۔
اگرچہ یہ زمرے کارآمد ہیں، لیکن رسائی کے مسائل شاذ و نادر ہی HTML، CSS اور JavaScript کے درمیان حدود پر غور کرتے ہیں۔
مثال کے طور پر، ایک حسب ضرورت ڈراپ ڈاؤن کے لیے مارک اپ میں سیمنٹک معلومات، CSS میں مرئی فوکس اسٹائل، یا JavaScript میں درست کی بورڈ رویے کی ضرورت ہو سکتی ہے۔
لہذا، رسائی بہترین کام کرتی ہے جب یہ ترقی کے اختتام پر ایک الگ کام ہونے کے بجائے خود عمل درآمد کا حصہ بنتی ہے۔
سیمنٹک ایچ ٹی ایم ایل کے ساتھ کیسے شروع کیا جائے۔
ARIA لکھنے سے پہلے قابل رسائی فیصلوں میں سے ایک صحیح HTML عناصر کا انتخاب کرنا ہے۔
اس پر غور کریں:
Submit
ماؤس صارفین عناصر پر کلک کر سکتے ہیں، لیکن div یہ بٹن کی طرح خود بخود کام نہیں کرتا ہے۔
اس کا اس سے موازنہ کریں:
مقامی button یہ پہلے سے ہی اس کردار کو براؤزر تک پہنچاتا ہے اور کی بورڈ کا متوقع رویہ فراہم کرتا ہے۔
اس کا تعلق کامیابی کے معیار 4.1.2 ناموں، کرداروں، اقدار سے ہے، جس میں نام اور کردار جیسی معلومات کو پروگرام کے مطابق ظاہر کرنے کے لیے صارف انٹرفیس کے اجزاء کی ضرورت ہوتی ہے۔ W3C بتاتا ہے کہ اس میں سے زیادہ تر معلومات پہلے ہی ڈویلپرز کو فراہم کی جاتی ہیں جب وہ تصریح کے مطابق معیاری کنٹرول استعمال کرتے ہیں۔
عملی مضمرات سادہ ہیں۔ براؤزر کے رویے کو دوبارہ پیش نہ کریں جب تک کہ ضروری نہ ہو۔
سیمنٹک HTML صفحہ کی ساخت کو کیسے پہنچاتا ہے۔
سیمنٹک ایچ ٹی ایم ایل صفحہ کے حصوں کے درمیان تعلقات کو ظاہر کرنے میں بھی مدد کرتا ہے۔
آپ اس طرح ایک صفحہ بنا سکتے ہیں:
...
...
کلاسیں اپنی مرضی کے مطابق کوئی بھی بصری ترتیب بنا سکتی ہیں، لیکن ضروری نہیں کہ وہ ایک ہی ڈھانچے کو پروگرام کے لحاظ سے پاس کریں۔
ایک زیادہ معنی خیز ساخت یہ ہوگی:
...
...
کامیابی کا معیار 1.3.1 معلومات اور تعلقات کا تقاضا ہے کہ بصری طور پر بتائے گئے ڈھانچے اور تعلقات پروگرام کے لحاظ سے قابل تعین ہوں یا متن میں بھی دستیاب ہوں۔ سیمنٹک مارک اپ یہ معلومات فراہم کر سکتا ہے بغیر ڈیولپرز کو اضافی قابل رسائی خصوصیات کا استعمال کرتے ہوئے معلومات کو دوبارہ تخلیق کرنے کی ضرورت ہے۔
اس کا مطلب یہ نہیں ہے کہ آپ استعمال کرتے ہیں: ،
How to Add a Skip Link
Repeated page navigation creates another issue.
If a page has a large navigation menu, a keyboard user may otherwise need to move through those links every time before reaching the main content.
A skip link provides another path:
Skip to main content
...
...
آپ لنکس کو مرکزی منظر سے باہر رکھ سکتے ہیں جب تک کہ وہ کی بورڈ فوکس حاصل نہ کریں۔
.skip-link {
position: absolute;
top: -4rem;
left: 1rem;
}
.skip-link:focus {
top: 1rem;
}
یہ ان طریقوں میں سے ایک ہے جو کامیابی کے معیار 2.4.1 بلاکنگ کو نظرانداز کرنے کے لیے جانا جاتا ہے، جس کے لیے مواد کے بار بار بلاکس کو نظرانداز کرنے کے لیے ایک طریقہ کار کی ضرورت ہوتی ہے۔ ڈبلیو سی اے جی کو درست سی ایس ایس کے نفاذ کے بجائے نتائج کی ضرورت ہوتی ہے۔
وسیع تر اصول کو برقرار رکھنے کے قابل ہے۔ اپنی مرضی کے مطابق سیمنٹکس کو شامل کرنے سے پہلے HTML کے موجودہ سیمنٹکس کا استعمال کریں۔.
تصاویر کے لیے مفید متن کے متبادل کیسے بنائیں
شامل کرنا alt متن تک رسائی کے سب سے مشہور طریقوں میں سے ایک ہے، لیکن قواعد کو اکثر حد سے زیادہ آسان بنایا جاتا ہے۔
کامیابی کا معیار 1.1.1 غیر متنی مواد کے لیے غیر متنی مواد کی ضرورت ہوتی ہے جس میں متن کا متبادل ہو جو کچھ مستثنیات کے ساتھ اسی مقصد کو پورا کرتا ہو۔ مثال کے طور پر، کاسمیٹک مواد کو لاگو کیا جانا چاہئے تاکہ معاون ٹیکنالوجیز اسے نظر انداز کر سکیں۔
اہم الفاظ یہ ہیں۔ مقصد.
مندرجہ ذیل تصویر پر غور کریں:
ایک متبادل یہ ہے کہ صارف کو مطلع کیا جائے کہ صفحہ ایک چارٹ پر مشتمل ہے۔ یہ کچھ بھی نہیں بتاتا جو چارٹ حقیقت میں دیکھنے والے صارف کو بتاتا ہے۔
اگر اصل پیغام آمدنی میں تبدیلی ہے، تو متبادل یہ ہیں:
اس کا مطلب یہ نہیں ہے کہ ہر چارٹ کو ایک جملے تک کم کیا جا سکتا ہے۔
اگر آپ کے چارٹ میں متعدد ڈیٹا سیریز یا تفصیلی قدریں ہیں جن کی قارئین کو ضرورت ہے، تو آپ کو بنیادی معلومات پہنچانے کے لیے قریبی تفصیل، قابل رسائی میزیں، یا دیگر طریقوں کی ضرورت ہو سکتی ہے۔
متبادل کو اس بات کی عکاسی کرنی چاہئے کہ تصویر اپنے سیاق و سباق میں کیا کردار ادا کرتی ہے۔
آرائشی تصاویر پر کارروائی کرنے کا طریقہ
آرائشی تصاویر کے مختلف استعمال ہوتے ہیں۔
بصری تقسیم کرنے والوں پر غور کریں۔
خالی alt ایک قدر بتاتی ہے کہ تصویر وہ معلومات فراہم نہیں کرتی جس کا اسے اعلان کرنا چاہیے۔
لاپتہ alt خصوصیات اور alt="" لہذا، وہ قابل تبادلہ نہیں ہیں۔ خالی متبادل ایک دانستہ فیصلہ ہے۔
آئیکنز کو کنٹرول کے اندر کیسے ہینڈل کریں۔
اب ایک سرچ بٹن پر غور کریں جس میں میگنفائنگ گلاس SVG ہو۔
متعلقہ معلومات یہ نہیں ہے کہ صارف میگنفائنگ گلاس کو دیکھ رہا ہے۔ اہم معلومات یہ ہے کہ کنٹرول تلاش کرنا شروع کر دیتا ہے۔
بٹن کو ایک قابل رسائی نام ملتا ہے۔ SearchSVG خود فالتو معلومات شامل نہیں کرتا ہے۔
یہ فیصلہ کرتے وقت کہ کون سا متبادل پیش کرنا ہے، اس سے زیادہ مددگار سوالات پوچھیں کہ "یہ تصویر کیسی نظر آتی ہے؟”
پوچھیں: اگر یہ تصویر بصری طور پر قابل شناخت نہ ہو تو صارف کون سی معلومات یا فعالیت کھو دے گا؟ رسائی کو لاگو کرتے وقت یہ فرق اہم ہے۔
رنگ، کنٹراسٹ، ٹیکسٹ اسکیلنگ، اور ری فلو کو کیسے ہینڈل کریں۔
رسائی عام CSS فیصلوں کو بھی متاثر کرتی ہے۔
آپ کا لے آؤٹ آپ کے مطلوبہ ویو پورٹ سائز کے مطابق درست نظر آ سکتا ہے، لیکن اگر کوئی شخص مواد کی نمائش کے طریقے کو تبدیل کرتا ہے تو اسے استعمال کرنا مشکل ہو سکتا ہے۔
صرف رنگ پر بھروسہ کیسے نہ کیا جائے۔
ایک فارم کا تصور کریں جو ان پٹ بارڈر کو بھوری رنگ سے سرخ میں تبدیل کرتا ہے جب توثیق ناکام ہوجاتی ہے۔
.input {
border: 1px solid #777;
}
.input.error {
border-color: red;
}
رنگ یہ بتاتا ہے کہ کچھ بدل گیا ہے، لیکن صارف کو حالت کو سمجھنے کے لیے رنگ کے فرق کو سمجھنا چاہیے۔
کامیابی کا معیار 1.4.1 رنگ صرف بصری ذریعہ نہیں ہونا چاہیے جو معلومات کو پہنچانے، کسی عمل کی نشاندہی کرنے، ردعمل ظاہر کرنے، یا بصری عناصر میں فرق کرنے کے لیے استعمال کیا جائے۔
بہتر عمل درآمد سٹائل کو اصل متن کے ساتھ ملانے کی اجازت دیتا ہے۔
Enter an email address in the format name@example.com.
آپ اب بھی سرخ بارڈر استعمال کر سکتے ہیں۔ صرف پیغام نہ پہنچائیں۔
متن کے تضاد کو کیسے چیک کریں۔
کامیابی کا معیار 1.4.3 کنٹراسٹ (کم سے کم) کا تقاضہ ہے کہ سادہ متن کا تناسب کم از کم ہو۔ 4.5:1. مناسب بڑے متن کا کم از کم تناسب یہ ہے: 3:1معیار پر مستثنیات لاگو ہوتے ہیں۔
صرف رنگ سے تضاد کا فیصلہ نہ کریں۔ ایک ڈسپلے پر دو رنگ کافی مختلف دکھائی دے سکتے ہیں چاہے تناسب ضرورت سے کم ہو۔ اپنے ڈیزائن اور ترقی کے عمل کے حصے کے طور پر تیاری کے ٹیسٹنگ ٹولز کا استعمال کریں۔
غیر متن کے تضاد اور متن کے برعکس کے درمیان فرق
کامیابی کا معیار 1.4.11 غیر متنی تضاد انٹرفیس کے اجزاء، حالتوں، اور معنی خیز گرافیکل اشیاء کی شناخت کے لیے درکار بصری معلومات کو ایڈریس کرتا ہے۔ مطلوبہ تناسب عام طور پر ہوتا ہے۔ 3:1 دائرہ کار اور معیار کے استثناء کے لحاظ سے ملحقہ رنگوں پر لاگو ہوتا ہے۔
یہ حسب ضرورت فارم کنٹرولز، معنی خیز شبیہیں، اجزاء کی حدود، منتخب ریاستیں، اور گرافیکل معلومات وغیرہ کو متاثر کر سکتا ہے۔
لہذا، متن کے برعکس کی ضروریات کو پاس کرنے کا خود بخود یہ مطلب نہیں ہے کہ باقی انٹرفیس میں کافی کنٹراسٹ ہے۔
متن کا سائز تبدیل کرنے کی حمایت کیسے کریں۔
کامیابی کا معیار 1.4.4 ٹیکسٹ اسکیلنگ کے لیے مخصوص مستثنیات کے ساتھ، مواد یا فعالیت کے نقصان کے بغیر ٹیکسٹ کو 200% تک اسکیل کرنے کی صلاحیت کی ضرورت ہوتی ہے۔
مقررہ جہتیں اکثر یہاں مسائل پیش کرتی ہیں۔
غور کریں:
.card {
height: 180px;
overflow: hidden;
}
اگر متن اس جگہ سے آگے بڑھتا ہے جو ڈویلپر کے خیال میں اسے درکار ہے، تو کچھ مواد ضائع ہو سکتا ہے۔
اگر آپ کے ڈیزائن کو واقعی ایک مقررہ اونچائی کی ضرورت نہیں ہے، تو جزو کو بڑھانا زیادہ محفوظ ہے۔
.card {
min-height: 180px;
}
اس سے یہ ثابت نہیں ہوتا کہ جزو نے معیار کو پاس کیا ہے۔ آپ کو اب بھی متن کا سائز تبدیل کرنے اور نتائج کا معائنہ کرنے کی ضرورت ہے۔
سی ایس ایس ناکامی کی ایک عام وجہ کو ختم کرتا ہے۔
ری فلو کو ڈیزائن کرنے کا طریقہ
کامیابی کا معیار 1.4.10 ری فلو معلومات یا فعالیت کو کھوئے بغیر یا ممنوعہ دو جہتی سکرولنگ کی ضرورت کے بغیر ایک ہی سائز کے تنگ مواد کو استعمال کرنے کی صلاحیت کا پتہ دیتا ہے۔
عمودی طور پر اسکرول کرنے والے مواد کے لیے، بیس اس کے برابر چوڑائی استعمال کرتا ہے: 320 CSS پکسلز. کچھ مواد، جیسے کچھ نقشے اور ڈیٹا ٹیبلز، کو درحقیقت دو جہتی ترتیب کی ضرورت ہو سکتی ہے اور یہ معیار سے مستثنیٰ ہیں۔
لچکدار ترتیب آپ کو اپنے باقاعدہ مواد کو اس میں ایڈجسٹ کرنے میں مدد کر سکتی ہے:
.settings-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1rem;
}
جب جگہ کم ہو جاتی ہے، تو کارڈ پورے صفحے کو چوڑا رکھنے کے بجائے ایک نئی قطار میں چلے جاتے ہیں۔
ریسپانسیو ڈیزائن یہاں مدد کرتا ہے، لیکن ‘ردعمل’ اور ‘قابل رسائی’ مترادف نہیں ہیں۔
ریسپانسیو پیجز اب بھی کنٹرولز کو چھپا سکتے ہیں، متن کو چھوٹا کر سکتے ہیں، مواد کو اوورلیپ کر سکتے ہیں، یا ہائی زوم پر خصوصیات کو ہٹا سکتے ہیں۔ یہ فرض کرنے کے بجائے کہ آپ کے میڈیا کے سوالات آپ کی رسائی کی ضروریات کو حل کرتے ہیں، ان کے رویے کی جانچ کریں۔
کی بورڈ کے ساتھ انٹرفیس کو کیسے چلائیں۔
آسان ترین دستی رسائی کے ٹیسٹ میں سے ایک یہ ہے کہ ماؤس کو ایک طرف رکھ کر کی بورڈ کے ساتھ ایپلیکیشن کا استعمال کریں۔
کامیابی کا معیار 2.1.1 کی بورڈ کو ایسی فعالیت کی ضرورت ہوتی ہے جو کی بورڈ انٹرفیس کے ذریعے چلائی جا سکتی ہے، سوائے اس کے جہاں بنیادی فنکشن دراصل صارف کی نقل و حرکت کے راستے پر منحصر ہو۔ ڈبلیو سی اے جی انٹرفیس کو ماؤس، ٹچ، آواز، یا ان پٹ کی کسی دوسری شکل کو سپورٹ کرنے سے نہیں روکتا ہے۔
آئیے اپنے صارف کنٹرولز پر واپس جائیں۔
Save
بنانا div ایسا لگتا ہے کہ بٹن کوئی بٹن کارروائی فراہم نہیں کرتا ہے۔
آپ خود اس طرز عمل کو دوبارہ ترتیب دینا شروع کر سکتے ہیں۔
Save
تاہم، JavaScript کو اب مناسب کی بورڈ تعامل بھی فراہم کرنا چاہیے۔
زیادہ تر معاملات میں یہ غیر ضروری ہے۔
مقامی کنٹرول استعمال کرنے سے تعامل کے رویے کی مقدار کم ہو جاتی ہے جو آپ کو دوبارہ پیدا کرنے کی ضرورت ہوتی ہے۔
W3C کی ARIA تصنیف کی مشقیں گائیڈ واضح طور پر اس فرق کی وضاحت کرتی ہے۔ یعنی، ARIA کا کردار براؤزرز کو کی بورڈ رویے شامل کرنے پر مجبور نہیں کرتا جو مقامی HTML کنٹرولز کے ساتھ آتے ہیں۔ اگر آپ اپنی مرضی کے مطابق ARIA ویجیٹ بناتے ہیں، تو آپ اس کے تعامل کو نافذ کرنے کے ذمہ دار ہیں۔
کی بورڈ ٹریپس کو کیسے چیک کریں۔
کامیابی کا معیار 2.1.2 کوئی کی بورڈ ٹریپس اس صورت حال کو حل نہیں کرتا جہاں کی بورڈ فوکس کسی جزو میں داخل ہوتا ہے لیکن کی بورڈ انٹرفیس سے باہر نہیں نکل سکتا۔
یہ خاص طور پر حسب ضرورت ایڈیٹرز، ڈائیلاگ باکسز، بلٹ ان ویجیٹس اور دیگر پیچیدہ کنٹرولز کے لیے موزوں ہے۔
کی بورڈ ٹیسٹ صرف یہ پوچھنے سے زیادہ ہونا چاہئے کہ کیا آپ کوئی کلید دبا سکتے ہیں۔ Tab جب تک عنصر توجہ حاصل نہیں کرتا۔
حقیقی کاموں کو مکمل کریں۔ اگر میں ایک ڈائیلاگ باکس کھولتا ہوں، تو کیا میں اس کے کنٹرول استعمال کر کے اسے بند کر سکتا ہوں؟ اگر میں نے حسب ضرورت ویجیٹ درج کیا ہے تو کیا میں اسے ویسا ہی چھوڑ سکتا ہوں؟ جب ایک مینو کھلتا ہے، کیا آپ متوقع کی بورڈ پیٹرن کا استعمال کرتے ہوئے اس کے ساتھ تعامل کرسکتے ہیں؟
کی بورڈ تک رسائی کا تعلق مجموعی تعامل سے ہے، نہ صرف یہ کہ آیا عناصر ٹیب ترتیب میں ظاہر ہوتے ہیں۔
کی بورڈ فوکس کو مرئی رکھنے کا طریقہ
کی بورڈ نیویگیشن مشکل ہو جاتا ہے جب صارف یہ نہیں بتا سکتا کہ فی الحال کس عنصر پر فوکس ہے۔
تو یہ سی ایس ایس خطرناک ہے۔
*:focus {
outline: none;
}
متبادل فراہم کیے بغیر براؤزر کے ڈیفالٹ فوکس ڈسپلے کو ہٹاتا ہے۔
کامیابی کا معیار 2.4.3 فوکس سیکوئنس کے لیے ایک ایسا موڈ فراہم کرنے کے لیے کی بورڈ سے چلنے کے قابل انٹرفیس کی ضرورت ہوتی ہے جس میں کی بورڈ فوکس انڈیکیٹر ظاہر ہوتا ہے۔
اگر پہلے سے طے شدہ خاکہ آپ کے ڈیزائن کے مطابق نہیں ہے، تو اسے صرف ہٹانے کے بجائے کسی اور مرئی فوکس ٹریٹمنٹ سے بدل دیں۔
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
یہ صرف ایک مثال ہے اور مناسب ہونے کی ضمانت نہیں دیتا۔ منتخب اشارے کو جزو کے ارد گرد رنگ کے خلاف نظر آنا چاہیے۔
WCAG 2.2 مبہم فوکس کو کیسے ہینڈل کرتا ہے۔
WCAG 2.2 نے کامیابی کا معیار 2.4.11 شامل کیا ہے AA کی سطح پر کوئی توجہ نہیں (کم سے کم)۔
جب صارف کے انٹرفیس کے جزو کو کی بورڈ فوکس حاصل ہوتا ہے، تو مصنف کا تخلیق کردہ مواد اسے مکمل طور پر چھپا نہیں سکتا۔ لیول AA کے معیار کا تقاضا ہے کہ کم از کم کچھ فوکس شدہ اجزا دکھائی دیں۔
فکسڈ ہیڈر مسئلہ کو ظاہر کرتا ہے۔
.site-header {
position: sticky;
top: 0;
height: 5rem;
}
فکسڈ ہیڈر کے بارے میں فطری طور پر ناقابل رسائی کچھ بھی نہیں ہے۔ مسئلہ اس وقت ہوتا ہے جب صفحہ اس ہیڈر کے پیچھے مرکوز لنکس یا کنٹرولز پر اسکرول کرتا ہے۔
جب اسکرول پوزیشننگ شامل ہو تو درج ذیل سی ایس ایس مددگار ثابت ہو سکتا ہے:
html {
scroll-padding-top: 6rem;
}
لیکن اسے مکمل حل نہ سمجھیں۔
کوکی نوٹیفیکیشن، چسپاں نیچے نیویگیشن، چیٹ ونڈوز، چپچپا ٹول بار، اور دیگر اوورلے اسی طرح کے مسائل پیدا کر سکتے ہیں، اس لیے کی بورڈ کے اصل تعامل کی جانچ کریں۔
اہم ضرورت نتائج کی ہے۔ یہاں تک کہ جب فوکس چلتا ہے، تب بھی صارف کو فوکسڈ جز کو دیکھنے کے قابل ہونا چاہیے۔
پوائنٹر ٹارگٹنگ اور ڈریگ تعاملات کو کیسے ڈیزائن کریں۔
کی بورڈ سپورٹ تمام تعامل کی رکاوٹوں کو دور نہیں کرتا ہے۔
WCAG 2.2 اضافی تقاضوں کو متعارف کراتا ہے جو خاص طور پر ٹچ اسکرین، ڈریگ اینڈ ڈراپ انٹرفیس، اور کمپیکٹ کنٹرولز سے متعلق ہے۔
ڈریگ کا متبادل کیسے فراہم کیا جائے۔
ایک ٹاسک بورڈ کا تصور کریں جہاں صارف کارڈز کو صرف گھسیٹ کر دوبارہ ترتیب دے سکتے ہیں۔
گھسیٹنا بہت سے صارفین کے لیے اچھا کام کر سکتا ہے، لیکن اس کے لیے پوائنٹر کو دبانے اور اسے حرکت دینے اور تعامل کو برقرار رکھتے ہوئے اسے صحیح پوزیشن میں رکھنے کی ضرورت ہوتی ہے۔
کامیابی کا معیار 2.5.7 ڈریگ اشارہ کسی ایک پوائنٹر آپریشن کے ذریعے ڈریگ کیے بغیر ڈریگ اشارہ استعمال کرنے کی فعالیت کو حاصل کرنے کے قابل ہونا چاہیے، سوائے اس کے کہ جب گھسیٹنا فعالیت کے لیے ضروری ہو۔
دوسرے کنٹرول فراہم کرتے ہوئے آپ ڈریگ اینڈ ڈراپ کو برقرار رکھ سکتے ہیں۔
Prepare monthly report
دوبارہ ترتیب دینے کی درست منطق درخواست پر منحصر ہے۔
اہم حصہ یہ ہے کہ صارف کو کارڈ کو گھسیٹنے کے بغیر ایک ہی فنکشن کو پورا کرنے کا ایک اور پوائنٹر پر مبنی طریقہ ہے۔
ڈبلیو سی اے جی یہ نہیں کہتا کہ "ڈریگ اینڈ ڈراپ کا استعمال نہ کریں”۔ اس کا مطلب ہے کہ گھسیٹنا غیر ضروری طور پر فعالیت کا واحد راستہ نہیں بننا چاہیے۔
اپنے گول سائز کے بارے میں کیسے سوچیں۔
کامیابی کا معیار 2.5.8 ہدف کا سائز (کم سے کم) WCAG 2.2 لیول AA میں ایک اور اضافہ ہے۔
معیار درج ذیل کم از کم ہدف کے سائز کا استعمال کرتا ہے: 24 x 24 CSS پکسلز متبادل طور پر، ایک متعین وقفہ متبادل ہے، جس میں چند مستثنیات شامل ہیں۔ لہذا آپ کو "تمام کلک کرنے کے قابل عناصر کی چوڑائی اور اونچائی ہمیشہ کم از کم 24 پکسلز ہونی چاہئے” کو آسان نہیں بنانا چاہئے۔
الگ تھلگ آئیکن بٹنوں کے لیے، آپ انہیں ایک بڑا ہدف دینے کا انتخاب کر سکتے ہیں۔
.icon-button {
min-width: 2.75rem;
min-height: 2.75rem;
display: inline-grid;
place-items: center;
}
عام روٹ فونٹ سائز جان بوجھ کر WCAG کم از کم سے بڑے اہداف بناتے ہیں۔
دکھائے گئے شبیہیں چھوٹے رہ سکتے ہیں۔
آئیکن کا سائز اور انٹرایکٹو آبجیکٹ کا سائز ایک جیسے نہیں ہیں۔
گھنے انٹرفیس کو ڈیزائن کرتے وقت یہ فرق مفید ہے۔
ناموں کو قابل رسائی اور مرئی لیبلز کے ساتھ مطابقت رکھنے کا طریقہ
کامیابی کا معیار 2.5.3 نامی لیبل سے مراد وہ کنٹرول ہے جس میں ایک مرئی ٹیکسٹ لیبل ہوتا ہے۔
قابل رسائی نام میں مرئی لیبل کا متن شامل ہونا چاہیے۔ یہ خاص طور پر ان صارفین کے لیے اہم ہے جو انٹرفیس میں ہیرا پھیری کے لیے اپنی آواز کا استعمال کرتے ہیں اور نظر آنے والے الفاظ کے ساتھ کنٹرولز کا حوالہ دیتے ہیں۔
اس سے بچیں:
دکھائی دینے والا لیبل ہے۔ Searchتاہم، قابل رسائی نام ہے Find products.
اس صورت میں، سب سے آسان ورژن بہتر ہے.
اگر آپ کو اضافی قابل رسائی سیاق و سباق کی ضرورت ہے تو متن کو مرئی رکھیں۔
شامل کرنے سے پہلے aria-labelیقینی بنائیں کہ آپ جو متن پہلے سے دیکھ رہے ہیں وہ کنٹرول کو ایک مناسب، قابل رسائی نام دیتا ہے۔
قابل رسائی فارم کیسے بنائیں
فارمز رسائی کے کئی شعبوں کو یکجا کرتے ہیں: ساخت، ہدایات، غلطیاں، ان پٹ مقصد، اور حیثیت کی تبدیلیاں۔
میدان ہی سے شروع کریں۔
فارم کنٹرولز کو لیبل کرنے کا طریقہ
مندرجہ ذیل پیٹرن عام ہے:
پلیس ہولڈرز ایک بصری اشارہ فراہم کرتے ہیں، لیکن مناسب لیبلز کا ایک اچھا متبادل نہیں ہیں۔
استعمال کریں:
کامیابی کا معیار 3.3.2 لیبلز یا ہدایات لیبلز یا ہدایات درکار ہیں اگر مواد کو صارف کے ان پٹ کی ضرورت ہو۔
کہ for اور id اقدار لیبلز اور فیلڈز کے درمیان پروگرامی تعلق بھی بناتی ہیں۔
عام ان پٹ مقاصد کی شناخت کیسے کریں۔
کامیابی کا معیار 1.3.5 ان پٹ شناخت کا مقصد ان فیلڈز پر لاگو ہوتا ہے جو صارفین کے بارے میں مخصوص قسم کی معلومات اکٹھا کرتے ہیں۔ اگر ٹیکنالوجی اس کی حمایت کرتی ہے، تو اس کا مقصد پروگرام کے لحاظ سے قابل شناخت ہونا چاہیے۔
ایچ ٹی ایم ایل autocomplete ٹوکنز ایک مشترکہ مقصد کو بتانے میں مدد کرتے ہیں۔
یہ براؤزرز اور دیگر ٹولز کو مفید ان پٹ مدد فراہم کرنے کی بھی اجازت دیتا ہے۔
مفید توثیق کی غلطیاں کیسے لکھیں۔
اب غلطی کے پیغام پر غور کریں:
Invalid input.
پیغام صارف کو تقریبا کچھ نہیں بتاتا ہے۔ کون سا ان پٹ غلط ہے؟ کیا مسئلہ ہے؟ کیا تبدیل کرنے کی ضرورت ہے؟
کامیابی کے معیار 3.3.1 غلطی کی شناخت غلط آئٹمز کی نشاندہی کرنے اور متن میں غلطیوں کو بیان کرنے کے لیے خود بخود ٹائپنگ کی غلطیوں کی ضرورت ہوتی ہے۔
عمل درآمد مندرجہ ذیل ہے:
Enter an email address in the format name@example.com.
aria-invalid="true" یہ غلط حالت کو بے نقاب کرتا ہے۔ aria-describedby کسی فیلڈ کے ساتھ تفصیل کو جوڑیں۔
زیادہ اہم بات یہ ہے کہ پیغام صارف کو بتاتا ہے کہ کیا ٹھیک کرنے کی ضرورت ہے۔
کامیابی کا معیار 3.3.3 خرابی کی تجاویز AA کی سطح پر مزید جاتی ہیں۔ اگر سسٹم کسی ان پٹ کی خرابی کا پتہ لگاتا ہے اور جانتا ہے کہ اسے کیسے درست کرنا ہے، تو اسے مناسب تجاویز فراہم کرنی چاہئیں جب تک کہ یہ مواد کی حفاظت یا مقصد سے سمجھوتہ نہ کرے۔
مقصد تمام غلطی کے پیغامات کو لمبا کرنا نہیں ہے۔ مقصد اسے قابل عمل بنانا ہے۔
ڈپلیکیٹ اندراجات سے کیسے بچیں۔
اپنی ادائیگی کے عمل پر غور کریں۔
صارفین ایک قدم میں اپنا شپنگ ایڈریس درج کرتے ہیں۔ اگلا مرحلہ آپ سے بلنگ کے مقاصد کے لیے بالکل وہی پتہ دوبارہ درج کرنے کو کہے گا۔
WCAG 2.2 نے کامیابی کے معیار 3.3.7 لیول A کی نقل متعارف کرائی۔
اگر اسی عمل کے دوران صارف کی طرف سے پہلے درج کی گئی یا فراہم کی گئی معلومات کی ضرورت ہو، تو وہ معلومات عام طور پر خود بخود پُر ہو جاتی ہیں یا صارف کو منتخب کرنے کے لیے دستیاب کر دی جاتی ہیں۔ معیار میں مستثنیات شامل ہیں جب دوبارہ اندراج ضروری ہو، سیکورٹی وجوہات کی بنا پر ضروری ہو، یا جب پچھلی معلومات مزید درست نہ ہوں۔
ادائیگی فراہم کر سکتی ہے:
تقاضے اسی عمل کے اندر معلومات کے بارے میں ہیں۔ اس کا مطلب یہ نہیں ہے کہ ہر ویب سائٹ کو ہر وہ قدر یاد رکھنا ہوگی جو صارف پچھلے دوروں کے دوران داخل کرتا ہے۔
یہ معیار یہ بھی ظاہر کرتا ہے کہ رسائی اسکرین ریڈر سپورٹ سے باہر کیوں ہے۔
غیر ضروری تکرار کو کم کرنا کسی کام کو مکمل کرنے کے لیے درکار علمی اور تعامل کی کوشش کو کم کر سکتا ہے۔
اپنی مدد کو مسلسل کیسے رکھیں
WCAG 2.2 کامیابی کے معیار 3.2.6 لیول A کے ساتھ مسلسل مدد بھی شامل کرتا ہے۔
اگر کوئی خاص مدد کا طریقہ کار صفحوں کی ایک سیریز میں بار بار ظاہر ہوتا ہے، تو اسے اسی رشتہ دار ترتیب میں ظاہر ہونا چاہیے جب تک کہ صارف کوئی تبدیلی شروع نہ کرے۔ ان میکانزم میں انسانی رابطے کی تفصیلات، رابطے کے طریقہ کار، خود مدد کے اختیارات، اور خودکار رابطے کے طریقہ کار شامل ہو سکتے ہیں۔
فرض کریں کہ آپ کے اکاؤنٹ کے تمام صفحات ہیڈر میں ایک سپورٹ لنک فراہم کرتے ہیں۔
Acme
Support
متعلقہ صفحات کے درمیان غیر متوقع طور پر ان سپورٹ میکانزم کو منتقل کرنے سے گریز کریں۔
اہم فرق یہ ہے کہ WCAG 2.2 ~ نہیں تمام ویب سائٹس سے ان میں سے ایک مدد کے طریقہ کار کو متعارف کرانے کی ضرورت ہے۔
اگر اہل مدد پہلے سے دستیاب ہو اور ایک ہی سیٹ میں متعدد صفحات پر دہرائی گئی ہو تو معیار لاگو ہوتا ہے۔
لہذا، ترقی پر اثر بنیادی طور پر مستقل مزاجی کے بارے میں ہے۔
ایک بار جب صارفین کو معلوم ہو جائے کہ ایک صفحہ پر مدد کہاں ظاہر ہوتی ہے، تو انہیں اگلے صفحہ پر دوبارہ تلاش کرنے کی ترغیب نہ دیں۔
WCAG 2.2 کس طرح سرٹیفیکیشن کو متاثر کرتا ہے۔
تصدیق ایک اور شعبہ ہے جو WCAG 2.2 میں تبدیل ہوا ہے۔
لاگ ان فارم پر غور کریں جو جان بوجھ کر پیسٹ کرنے کو روکتا ہے۔
passwordInput.addEventListener("paste", (event) => {
event.preventDefault();
});
ایسا لگتا ہے کہ یہ صارفین کو اپنے پاس ورڈز کو دستی طور پر درج کرنے کی ترغیب دے گا، لیکن یہ ایسے طریقہ کار میں بھی رکاوٹ بن سکتا ہے جو اسناد کو یاد رکھنے یا ریکارڈ کرنے کی ضرورت کو کم کرتے ہیں۔
کامیابی کا معیار 3.3.8 قابل رسائی سرٹیفیکیشن (کم سے کم) سرٹیفیکیشن کے اقدامات کو ایڈریس کرتا ہے جن کے لیے علمی فعل کی جانچ کی ضرورت ہوتی ہے۔
اگر کوئی قبول شدہ متبادل یا معاون طریقہ کار دستیاب ہو تو سطح AA کی ضروریات اس طرح کی جانچ کی اجازت دیتی ہیں۔ W3C خاص طور پر پاس ورڈ مینیجر کی مدد اور کاپی اور پیسٹ کو ایسے طریقہ کار کے طور پر شناخت کرتا ہے جو تصدیق سے وابستہ علمی بوجھ کو کم کر سکتا ہے۔
اپنے موجودہ لاگ ان فارم کا استعمال کرتے ہوئے، آپ درج ذیل ٹولز استعمال کر سکتے ہیں:
اس معیار کو "WCAG 2.2 منع کرتا ہے پاس ورڈز” پر آسان کرنا غلط ہے۔ یہ سچ نہیں ہے۔
پاس ورڈز ایک علمی فنکشن ٹیسٹ ہیں، لیکن اگر آپ کے پاس صارفین کو اس ٹیسٹ کو مکمل کرنے میں مدد کرنے کے لیے کوئی طریقہ کار ہے، جیسا کہ پاس ورڈ مینیجر جو انہیں فیلڈز کو بھرنے کی اجازت دیتا ہے، تو ہمارا معیار اس کی اجازت دیتا ہے۔
اسی استدلال کا اطلاق کثیر عنصری توثیق پر ہوتا ہے۔
اگر آپ کے عمل کے لیے صارفین کو ایک ڈیوائس پر کوڈ پڑھنے اور اسے دوسرے پر دستی طور پر لکھنے کی ضرورت ہوتی ہے، تو غور کریں کہ آیا آپ کی تصدیق کا بہاؤ علمی بوجھ سے بچنے کا راستہ فراہم کرتا ہے۔ W3C رہنما خطوط واضح طور پر ایک کثیر مرحلہ تصدیقی عمل اور اس کے ذریعے قابل رسائی راستے کی ضرورت پر بات کرتے ہیں۔
یہ اس بات کی ایک بہترین مثال ہے کہ کیوں درست معیارات آسان رسائی کی چیک لسٹ سے زیادہ اہم ہیں۔
HTML کو تبدیل کیے بغیر ARIA کا استعمال کیسے کریں۔
ARIA کا مطلب ہے۔ بھرپور، قابل رسائی انٹرنیٹ ایپلی کیشنز.
ایسے کردار، ریاستیں، اور خصوصیات فراہم کرتی ہیں جو ویب ایپلیکیشنز کو ایسی معلومات پہنچانے میں مدد کرتی ہیں جو معاون ٹیکنالوجیز سے دستیاب نہیں ہیں۔
ARIA مفید ہے۔ یہ بھی غلط استعمال کا شکار ہے۔
مندرجہ ذیل مثال پر غور کریں:
Place order
کہ role رسائی API کو بتاتا ہے کہ عنصر ایک بٹن کی نمائندگی کرتا ہے۔ یہ عنصر کو بٹن کی طرح برتاؤ نہیں کرتا ہے۔
W3C ARIA تصنیف کی مشقیں گائیڈ ARIA کے کردار کو وعدوں کے طور پر بیان کرتی ہے۔ جب آپ استعمال کرتے ہیں role="button"متوقع کی بورڈ اور تعامل کا رویہ خود فراہم کرنا آپ کی ذمہ داری ہے۔ ARIA براؤزرز کو اس رویے کو خود بخود شامل کرنے نہیں دیتا ہے۔
ڈیفالٹ HTML عناصر کو ترجیح دیں اگر وہ پہلے سے موجود ہیں۔
ARIA اسٹیٹس کو کیسے بتاتا ہے۔
ARIA مفید ہے جب اکیلے HTML کسی جزو کی موجودہ حالت کو کافی حد تک نہیں بتاتا ہے۔
انکشاف کنٹرولز پر غور کریں۔
آپ رکھ سکتے ہیں aria-expanded ڈسپلے حالت کے ساتھ ہم وقت سازی کریں:
const trigger = document.querySelector(
"#account-options-trigger"
);
const panel = document.querySelector(
"#account-options"
);
trigger.addEventListener("click", () => {
const isExpanded =
trigger.getAttribute("aria-expanded") === "true";
trigger.setAttribute(
"aria-expanded",
String(!isExpanded)
);
panel.hidden = isExpanded;
});
جاوا اسکرپٹ دو متعلقہ کام انجام دیتا ہے:
تبدیل کریں کہ آیا پینل چھپا ہوا ہے اور ٹرگر کے ذریعے سامنے آنے والی رسائی کی حالت کو اپ ڈیٹ کریں۔
اگرچہ پینل بصری طور پر کھلتا ہے، aria-expanded کھنڈرات falseانٹرفیس میں اب دو متضاد ریاستیں ہیں۔
یہ ARIA کے کچھ مفید اصولوں کو ظاہر کرتا ہے۔ ARIA ریاست کو یہ بیان کرنا چاہیے کہ اصل میں کون سا انٹرفیس موجود ہے۔
مزید پیچیدہ نمونوں کے لیے، جیسے ڈائیلاگ باکسز، کومبو باکسز، ٹیبز، مینوز، اور گرڈز، W3C ARIA تصنیف کی مشقیں گائیڈ دستاویزی تعامل کے نمونے اور مثالیں فراہم کرتی ہے۔ W3C یہ بھی واضح کرتا ہے کہ APG ایک نفاذ گائیڈ ہے، ایک نسخہ تک رسائی کا معیار نہیں۔
متحرک حیثیت کے پیغامات کو قابل رسائی بنانے کا طریقہ
جدید انٹرفیس نئے صفحات کو لوڈ کیے بغیر کثرت سے اپ ڈیٹ ہوتا رہتا ہے۔
صارفین اپنا پروفائل محفوظ کر سکتے ہیں اور دیکھ سکتے ہیں:
Your settings were saved.
یا یہ دیکھنے کے لیے تلاش کریں:
18 results found.
دیکھنے والے صارفین اکثر اپنے موجودہ کنٹرول کو چھوڑے بغیر ان اپ ڈیٹس کو چیک کر سکتے ہیں۔
معاون ٹکنالوجیوں کو متعلقہ اسٹیٹس پیغامات کی شناخت کے لیے پروگرامی طریقہ کی بھی ضرورت ہوتی ہے۔
کامیابی کا معیار 4.1.3 اسٹیٹس میسجز کے لیے ایک مستند اسٹیٹس میسج کی ضرورت ہوتی ہے جسے پروگرام کے مطابق حل کیا جاسکتا ہے تاکہ معاون ٹیکنالوجی پیغام پر توجہ مرکوز کیے بغیر اسٹیٹس میسج کو ظاہر کرسکے۔
معمول کی اسٹوریج کی تصدیق کے لیے، آپ استعمال کر سکتے ہیں: role="status":
پھر مواد کو اپ ڈیٹ کریں۔
const saveButton = document.querySelector(
"#save-settings"
);
const saveStatus = document.querySelector(
"#save-status"
);
saveButton.addEventListener("click", () => {
saveStatus.textContent =
"Your settings were saved.";
});
براؤزر کی بورڈ فوکس کو سیو بٹن سے ہٹائے بغیر معاون ٹیکنالوجیز میں ریاستی تبدیلیوں کو ظاہر کر سکتے ہیں۔
تمام متحرک DOM تبدیلیاں حیثیت کے پیغامات نہیں ہیں۔
ڈبلیو سی اے جی اس اصطلاح کی مزید وضاحت کرتا ہے۔ اس میں آپریشن کے نتیجہ یا کامیابی کے بارے میں معلومات، درخواست کی انتظار کی حالت، عمل کی پیشرفت، اور اگر اپ ڈیٹ خود سیاق و سباق کی تبدیلی کی تشکیل نہیں کرتا ہے تو غلطیوں کی موجودگی کے بارے میں معلومات شامل ہیں۔
مواد کی تمام تبدیلیوں کے لیے حقیقی وقت میں اعلانات نہ کریں۔ ضرورت سے زیادہ چیٹی انٹرفیس دیگر استعمال کے مسائل کا سبب بن سکتا ہے۔
معلومات کے لیے اسٹیٹ سیمنٹکس کا استعمال کریں جو صارف کو اپنے موجودہ کام کو جاری رکھتے ہوئے حاصل کرنا چاہیے۔
ویب سائٹ تک رسائی کی جانچ کیسے کریں۔
رسائی کی جانچ طریقوں کے امتزاج کا استعمال کرتے ہوئے بہترین کام کرتی ہے۔
ڈبلیو سی اے جی کو خودکار ٹولز اور انسانی تشخیص کے ذریعے جانچ میں مدد کے لیے ڈیزائن کیا گیا ہے۔ خودکار اسکینرز بہت سے تکنیکی مسائل کی نشاندہی کر سکتے ہیں، لیکن وہ قابل اعتماد طریقے سے تمام قابل رسائی تقاضوں کا تعین نہیں کر سکتے یا اس بات کا تعین نہیں کر سکتے کہ آیا صارف کا پورا سفر مناسب ہے۔
خودکار جانچ کے ساتھ کیسے شروع کیا جائے۔
خودکار ٹولز دوبارہ قابل تکنیکی جانچ کے لیے مفید ہیں۔
یہ قابل رسائی ناموں، کچھ متضاد ناکامیوں، ARIA کے غلط استعمال، فارم کے تعلقات، اور مشین کا پتہ لگانے کے دیگر حالات سے متعلق بہت سے مسائل کی نشاندہی کر سکتا ہے۔
جب درستگی معنی پر منحصر ہوتی ہے تو حدود ظاہر ہوتی ہیں۔
ٹول آپ کو اجازت دیتا ہے۔ alt اس کی وجہ یہ ہے کہ اس بات کا تعین کرنا ہمیشہ ممکن نہیں ہوتا کہ آیا متن تصویر کے مقصد کو درست طریقے سے بیان کرتا ہے۔
لہذا، آٹومیشن شروع ہونا چاہئے، ختم نہیں، تشخیص.
کی بورڈ ٹیسٹ کیسے کریں۔
ایک صفحہ کھولیں، اپنے ماؤس کو ایک طرف رکھیں، اور صرف اپنے کی بورڈ کا استعمال کرکے اصل کام مکمل کریں۔
سے شروع کریں۔ Tab انٹرایکٹو عناصر کے ساتھ آگے بڑھیں۔ Shift + Tab واپس جاؤ۔
استعمال کریں Enter اور Space جہاں مناسب ہو کنٹرولز کو فعال کریں۔ اپنی مرضی کے ویجٹ تک تیر والے بٹنوں کا استعمال کرتے ہوئے رسائی حاصل کی جا سکتی ہے یا Escape تعامل کے پیٹرن پر منحصر ہے، ARIA Authoring Practices کی بورڈ رہنما خطوط عام ویجیٹ پیٹرن کے لیے متوقع رویے کی دستاویز کرتے ہیں۔
بس اسے دبائیں مت۔ Tab اسے چند بار کریں اور رک جائیں۔
مثال کے طور پر، اگر آپ ادائیگی کے بہاؤ کی جانچ کر رہے ہیں:
-
ٹوکری پر جائیں۔
-
مقدار کو تبدیل کریں۔
-
ادائیگی جاری رکھیں۔
-
فارم کے ذریعے جائیں.
-
براہ مہربانی جمع کرائیں.
-
براہ کرم غلطی کو درست کریں۔
-
عمل کو مکمل کریں۔
جیسا کہ آپ ایسا کرتے ہیں، اس بات کو یقینی بنائیں کہ آپ تمام ضروری کنٹرولز تک پہنچ سکتے ہیں اور آپریٹ کر سکتے ہیں، تمام اجزاء سے دور رہ سکتے ہیں، ایک مناسب فوکس آرڈر کی پیروی کر سکتے ہیں، اس بات کا تعین کر سکتے ہیں کہ فی الحال فوکس کہاں ہے، اور اوورلیز کو فوکسڈ مواد کو چھپانے سے روکیں۔
اگر کوئی مسئلہ پیش آتا ہے تو، متعلقہ تقاضوں میں کامیابی کا معیار 2.1.1 کی بورڈ، کامیابی کا معیار 2.1.2 کوئی کی بورڈ ٹریپس نہیں، کامیابی کا معیار 2.4.3 فوکس آرڈر، کامیابی کا معیار 2.4.7 فوکس ویزیبلٹی، اور کامیابی کا معیار 2.4.7 فوکس (Obcusmined 1.2) شامل ہیں۔
زوم، سائز تبدیل، اور ری فلو کی جانچ کیسے کریں۔
آپ بنیادی زوم ٹیسٹنگ براہ راست اپنے براؤزر میں انجام دے سکتے ہیں۔
زیادہ تر براؤزرز میں:
W3C کا زوم ایزی چیک 200% پر جانچ کا مشورہ دیتا ہے۔
پورے صفحے کو دیکھنے کے لیے زوم بڑھائیں اور تلاش کریں:
-
کٹا ہوا متن
-
اوورلیپنگ عناصر
-
غائب کنٹرول
-
نیویگیشن نے کام کرنا چھوڑ دیا۔
-
دوسرے مواد کے پیچھے چھپا ہوا مواد
-
عام صفحہ کا مواد افقی سکرولنگ
اس کے علاوہ، آپ کا مواد کیسے ری فلو ہوتا ہے اس کا معائنہ کرنے کے لیے تنگ براؤزر ونڈوز یا ریسپانسیو براؤزر ٹولز کا استعمال کریں۔
یہ کامیابی کے معیار 1.4.4 ٹیکسٹ اسکیلنگ اور کامیابی کے معیار 1.4.10 ری فلو میں بیان کردہ رویے کی تصدیق کرنے کے لیے ہے۔
رنگ اور کنٹراسٹ کی جانچ کیسے کریں۔
پیش منظر اور پس منظر کے امتزاج کی پیمائش کرنے کے لیے اپنے براؤزر کے ڈویلپر ٹولز میں دستیاب کنٹراسٹ چیکر یا رنگ کی معلومات کا استعمال کریں۔
آپ یہ سادہ متن کے ساتھ ساتھ اہم غیر متنی عناصر جیسے صارف کنٹرول بارڈرز، شبیہیں، اور اسٹیٹس انڈیکیٹرز کے لیے کرتے ہیں۔
پھر ہم رنگ پر منحصر معلومات کو الگ سے جانچتے ہیں۔
مثال کے طور پر، اگر کوئی ایرر فیلڈ سرخ ہو جائے تو رنگ کی تبدیلی کو عارضی طور پر نظر انداز کریں اور پوچھیں کہ کیا دیگر بصری اشارے اب بھی غلطی کو ظاہر کرتے ہیں۔
یہ چیکس کامیابی کے معیار 1.4.1 رنگ کے استعمال، کامیابی کا معیار 1.4.3 کنٹراسٹ (کم سے کم) اور کامیابی کا معیار 1.4.11 غیر متن کے تضاد سے مطابقت رکھتے ہیں۔
اپنے فارم کی دستی طور پر جانچ کیسے کریں۔
صرف درست معلومات کے ساتھ اپنے فارم کی جانچ نہ کریں۔ زیادہ سے زیادہ کیسز کی جانچ کرنے کے لیے، آپ کو جان بوجھ کر غلطیاں کرنے کی ضرورت ہے۔
مطلوبہ فیلڈز کو خالی چھوڑ دیں۔ براہ کرم غلط فارمیٹ شدہ ای میل ایڈریس درج کریں۔ وہ قیمت جمع کروائیں جسے فارم میں مسترد کیا جانا چاہیے۔
پھر دیکھیں کہ کیا آپ کر سکتے ہیں:
-
مسئلہ کے علاقوں کی شناخت کریں۔
-
غلطی کے پیغام کو سمجھیں۔
-
فیصلہ کریں کہ اسے کیسے درست کیا جائے۔
-
کی بورڈ کا استعمال کرتے ہوئے غلطیوں تک پہنچنا
-
اپنی معلومات میں ترمیم کریں اور جاری رکھیں
اپنے براؤزر کے ڈویلپر ٹولز میں اپنے فارم کنٹرولز کو بھی چیک کریں تاکہ یہ یقینی بنایا جا سکے کہ مرئی لیبلز اور وضاحتیں صحیح فیلڈز سے وابستہ ہیں۔
یہ ٹیسٹ کامیابی کے معیار 3.3.1 غلطی کی شناخت، کامیابی کا معیار 3.3.2 لیبل یا ہدایات، اور کامیابی کا معیار 3.3.3 غلطی کی تجویز کی تصدیق کرنے میں مدد کرتے ہیں۔
پوائنٹر اور ڈریگ تعامل کی جانچ کیسے کریں۔
اگر آپ کے انٹرفیس میں ڈریگ اینڈ ڈراپ شامل ہے تو پہلے کام کو عام طور پر مکمل کریں۔ پھر گھسیٹے بغیر وہی فنکشن کرنے کی کوشش کریں۔
مثال کے طور پر، اگر کسی ایکشن کو کسی نئے مقام پر گھسیٹ کر لے جایا جا سکتا ہے، تو یقینی بنائیں کہ دوسرے کنٹرول جو پوائنٹر کے طور پر کام کرتے ہیں وہ بھی اس کارروائی کو منتقل کر سکتے ہیں۔
یہ کامیابی کے معیار 2.5.7 ڈریگ رویے کے لیے ایک عملی امتحان فراہم کرتا ہے۔
چھوٹے کنٹرولز کے لیے، اپنے براؤزر کے ڈویلپر ٹولز کا استعمال کریں تاکہ صرف دکھائے جانے والے آئیکن کا جائزہ لینے کے بجائے پیش کردہ انٹرایکٹو ایریا کا معائنہ کریں۔
کامیابی کا معیار 2.5.8 ہدف کے سائز (کم سے کم) کا تعین کرتے وقت، کلوز بٹن، کیروسل کنٹرولز، صفحہ بندی کے آئٹمز، آئیکن بٹنز، اور پرہجوم ٹول بار پر خصوصی توجہ دیں۔
رسائی کے درخت کا معائنہ کیسے کریں۔
جدید براؤزر ڈویلپر ٹولز عناصر سے متعلق قابل رسائی معلومات کو ظاہر کرتے ہیں۔
اہم کنٹرولز کا معائنہ کریں اور انٹرفیس کے ڈسپلے کے ساتھ رسائی کے درخت کی رپورٹ کا موازنہ کریں۔
ایک بٹن بصری طور پر کچھ اس طرح کہہ سکتا ہے: Search قابل رسائی نام بالکل مختلف کہتے ہیں۔ عوام عوامی دکھائی دے سکتے ہیں، لیکن aria-expanded حیثیت باقی ہے false.
رسائی کے درخت کی جانچ کرنے سے ان تضادات کو بے نقاب کرنے میں مدد مل سکتی ہے۔
معاون ٹیکنالوجی کا استعمال کرتے ہوئے ٹیسٹ کرنے کا طریقہ
اسکرین ریڈر کے ساتھ جانچ کرتے وقت، پورے کام پر توجہ دیں۔
فارمز کے لیے، آپ کسی فیلڈ میں جاتے ہیں، اس کے لیبل کی شناخت کرتے ہیں، غلط معلومات درج کرتے ہیں، جمع کراتے ہیں، غلطی کو تلاش کرتے ہیں اور سمجھتے ہیں، اسے درست کرتے ہیں، اور کامیابی کی صورتحال کو چیک کرتے ہیں۔
سوال صرف یہ نہیں ہے:
کیا سکرین ریڈر اس صفحہ کو پڑھ سکتا ہے؟
مزید مفید سوالات میں شامل ہیں:
کیا صارف کام مکمل کر سکتا ہے اور سمجھ سکتا ہے کہ کیا ہوا؟
معذوری کے حامل صارفین کے ساتھ ٹیسٹ کرنے سے استعمال کی اضافی رکاوٹوں کا پتہ چل سکتا ہے جو خودکار، معیار پر مبنی جائزوں میں ظاہر نہیں ہوتے ہیں۔
نتیجہ
ڈبلیو سی اے جی کی ضروریات کو مشترکہ ترقیاتی فیصلوں سے جوڑنے سے انہیں سمجھنے میں آسانی ہوتی ہے۔ اہم تبدیلی یہ ہے کہ رسائی کو حتمی آڈٹ کے طور پر استعمال کرنا بند کیا جائے۔ جب آپ باقی سب کچھ بناتے ہو تو انٹرفیس پر بنائیں۔