# قابل رسائی ویب صفحات بنانا ![سب کچھ قابل رسائی کے بارے میں](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ur.png) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) ## لیکچر سے پہلے کا کوئز [لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/) > ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر ہر کسی کے لیے رسائی ایک لازمی پہلو ہے۔ > > \- سر ٹموتھی برنرز لی، W3C کے ڈائریکٹر اور ورلڈ وائڈ ویب کے موجد یہ بات آپ کو حیران کر سکتی ہے: جب آپ قابل رسائی ویب سائٹس بناتے ہیں، تو آپ صرف معذور افراد کی مدد نہیں کر رہے ہوتے—بلکہ آپ ویب کو سب کے لیے بہتر بنا رہے ہوتے ہیں! کبھی گلی کے کونوں پر وہ چھوٹے ریمپ دیکھے ہیں؟ وہ اصل میں وہیل چیئرز کے لیے بنائے گئے تھے، لیکن اب وہ بچوں کی گاڑیوں، سامان لے جانے والے کارکنوں، سفر کرنے والوں کے سامان کے ساتھ، اور سائیکل سواروں کے لیے بھی مددگار ہیں۔ یہی طریقہ قابل رسائی ویب ڈیزائن کا ہے—ایسے حل جو ایک گروپ کی مدد کرتے ہیں، اکثر سب کے لیے فائدہ مند ثابت ہوتے ہیں۔ کافی دلچسپ، ہے نا؟ اس سبق میں، ہم یہ دریافت کریں گے کہ ایسی ویب سائٹس کیسے بنائی جائیں جو واقعی سب کے لیے کام کریں، چاہے وہ ویب کو کیسے بھی براؤز کریں۔ آپ عملی تکنیکیں دریافت کریں گے جو پہلے ہی ویب کے معیارات میں شامل ہیں، ٹیسٹنگ ٹولز کے ساتھ کام کریں گے، اور دیکھیں گے کہ قابل رسائی ویب سائٹس کیسے سب کے لیے زیادہ قابل استعمال بناتی ہیں۔ اس سبق کے اختتام تک، آپ کو یہ اعتماد ہوگا کہ قابل رسائی کو اپنے ترقیاتی ورک فلو کا قدرتی حصہ بنا سکیں۔ تیار ہیں یہ دریافت کرنے کے لیے کہ سوچ سمجھ کر کیے گئے ڈیزائن کے انتخاب کیسے اربوں صارفین کے لیے ویب کو کھول سکتے ہیں؟ آئیے شروع کریں! > آپ یہ سبق [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) پر لے سکتے ہیں! ## معاون ٹیکنالوجیز کو سمجھنا کوڈنگ شروع کرنے سے پہلے، آئیے ایک لمحہ نکال کر یہ سمجھیں کہ مختلف صلاحیتوں والے لوگ ویب کو حقیقت میں کیسے تجربہ کرتے ہیں۔ یہ صرف نظریہ نہیں ہے—ان حقیقی دنیا کے نیویگیشن پیٹرنز کو سمجھنا آپ کو ایک بہتر ڈویلپر بنائے گا! معاون ٹیکنالوجیز حیرت انگیز ٹولز ہیں جو معذور افراد کو ویب سائٹس کے ساتھ ایسے طریقوں سے تعامل کرنے میں مدد دیتی ہیں جو آپ کو حیران کر سکتے ہیں۔ ایک بار جب آپ ان ٹیکنالوجیز کے کام کرنے کا طریقہ سمجھ لیں، تو قابل رسائی ویب تجربات بنانا بہت زیادہ آسان ہو جاتا ہے۔ یہ بالکل ایسے ہے جیسے آپ اپنے کوڈ کو کسی اور کی نظر سے دیکھنا سیکھ رہے ہوں۔ ### اسکرین ریڈرز [اسکرین ریڈرز](https://en.wikipedia.org/wiki/Screen_reader) کافی پیچیدہ ٹیکنالوجی ہیں جو ڈیجیٹل متن کو تقریر یا بریل آؤٹ پٹ میں تبدیل کرتی ہیں۔ اگرچہ وہ بنیادی طور پر بصری معذوری والے افراد کے لیے استعمال ہوتے ہیں، وہ سیکھنے کی معذوری جیسے ڈسلیکسیا والے صارفین کے لیے بھی بہت مددگار ہیں۔ میں اسکرین ریڈر کو ایک بہت ہی ذہین راوی کے طور پر سوچتا ہوں جو آپ کو کتاب پڑھ کر سناتا ہے۔ یہ مواد کو منطقی ترتیب میں بلند آواز سے پڑھتا ہے، انٹرایکٹو عناصر جیسے "بٹن" یا "لنک" کا اعلان کرتا ہے، اور صفحہ کے ارد گرد چھلانگ لگانے کے لیے کی بورڈ شارٹ کٹس فراہم کرتا ہے۔ لیکن بات یہ ہے—اسکرین ریڈرز صرف اس وقت اپنا جادو دکھا سکتے ہیں جب ہم ویب سائٹس کو مناسب ساخت اور بامعنی مواد کے ساتھ بنائیں۔ یہی وہ جگہ ہے جہاں آپ بطور ڈویلپر آتے ہیں! **پلیٹ فارمز پر مشہور اسکرین ریڈرز:** - **ونڈوز**: [NVDA](https://www.nvaccess.org/about-nvda/) (مفت اور سب سے زیادہ مقبول)، [JAWS](https://webaim.org/articles/jaws/)، [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (بلٹ ان) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (بلٹ ان اور بہت قابل) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (بلٹ ان) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (مفت اور اوپن سورس) **اسکرین ریڈرز ویب مواد کو کیسے نیویگیٹ کرتے ہیں:** اسکرین ریڈرز متعدد نیویگیشن طریقے فراہم کرتے ہیں جو تجربہ کار صارفین کے لیے براؤزنگ کو مؤثر بناتے ہیں: - **تسلسل سے پڑھنا**: مواد کو اوپر سے نیچے تک پڑھتا ہے، جیسے کتاب کی پیروی کرنا - **لینڈ مارک نیویگیشن**: صفحہ کے سیکشنز کے درمیان چھلانگ لگائیں (ہیڈر، نیویگیشن، مین، فوٹر) - **ہیڈنگ نیویگیشن**: ہیڈنگز کے درمیان چھلانگ لگائیں تاکہ صفحہ کی ساخت کو سمجھ سکیں - **لنک لسٹس**: تمام لنکس کی فہرست تیار کریں تاکہ جلدی رسائی حاصل ہو - **فارم کنٹرولز**: ان پٹ فیلڈز اور بٹنوں کے درمیان براہ راست نیویگیٹ کریں > 💡 **یہاں ایک چیز جو مجھے حیران کر گئی**: 68% اسکرین ریڈر صارفین بنیادی طور پر ہیڈنگز کے ذریعے نیویگیٹ کرتے ہیں ([WebAIM سروے](https://webaim.org/projects/screenreadersurvey9/#finding))۔ اس کا مطلب ہے کہ آپ کی ہیڈنگ کی ساخت صارفین کے لیے ایک روڈ میپ کی طرح ہے—جب آپ اسے درست کرتے ہیں، تو آپ واقعی لوگوں کو اپنے مواد کے ارد گرد تیزی سے راستہ تلاش کرنے میں مدد کر رہے ہوتے ہیں! ### اپنی ٹیسٹنگ ورک فلو بنانا یہ اچھی خبر ہے—مؤثر قابل رسائی ٹیسٹنگ کو زبردست ہونے کی ضرورت نہیں ہے! آپ خودکار ٹولز کو شامل کرنا چاہیں گے (یہ واضح مسائل کو پکڑنے میں شاندار ہیں) اور کچھ ہاتھ سے ٹیسٹنگ کریں۔ یہاں ایک منظم طریقہ ہے جو میں نے پایا ہے کہ زیادہ تر مسائل کو پکڑتا ہے بغیر آپ کا پورا دن کھائے: **ضروری دستی ٹیسٹنگ ورک فلو:** ```mermaid graph TD A[Start Testing] --> B{Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{Focus Management} J --> K[Ensure focus indicators are visible] K --> L[Testing Complete] ``` **مرحلہ وار ٹیسٹنگ چیک لسٹ:** 1. **کی بورڈ نیویگیشن**: صرف Tab، Shift+Tab، Enter، Space، اور Arrow keys استعمال کریں 2. **اسکرین ریڈر ٹیسٹنگ**: NVDA، VoiceOver، یا Narrator کو فعال کریں اور بند آنکھوں کے ساتھ نیویگیٹ کریں 3. **زوم ٹیسٹنگ**: 200% اور 400% زوم لیولز پر ٹیسٹ کریں 4. **رنگ کے تضاد کی تصدیق**: تمام متن اور UI اجزاء چیک کریں 5. **فوکس انڈیکیٹر ٹیسٹنگ**: یقینی بنائیں کہ تمام انٹرایکٹو عناصر کے پاس نظر آنے والے فوکس اسٹیٹس ہیں ✅ **لائٹ ہاؤس سے شروع کریں**: اپنے براؤزر کے DevTools کھولیں، لائٹ ہاؤس قابل رسائی آڈٹ چلائیں، پھر نتائج کو اپنی دستی ٹیسٹنگ کے فوکس ایریاز کی رہنمائی کے لیے استعمال کریں۔ ### زوم اور میگنیفیکیشن ٹولز آپ جانتے ہیں کہ آپ کبھی کبھار اپنے فون پر متن کو بڑا کرنے کے لیے زوم کرتے ہیں، یا روشن دھوپ میں اپنے لیپ ٹاپ اسکرین پر جھکتے ہیں؟ بہت سے صارفین روزانہ مواد کو پڑھنے کے قابل بنانے کے لیے میگنیفیکیشن ٹولز پر انحصار کرتے ہیں۔ اس میں کم بصارت والے افراد، عمر رسیدہ افراد، اور کوئی بھی شامل ہے جو کبھی باہر ویب سائٹ پڑھنے کی کوشش کرتا ہے۔ جدید زوم ٹیکنالوجیز صرف چیزوں کو بڑا کرنے سے آگے بڑھ چکی ہیں۔ یہ سمجھنا کہ یہ ٹولز کیسے کام کرتے ہیں آپ کو ایسے ذمہ دار ڈیزائن بنانے میں مدد دے گا جو کسی بھی میگنیفیکیشن لیول پر فعال اور دلکش رہیں۔ **جدید براؤزر زوم کی صلاحیتیں:** - **صفحہ زوم**: تمام مواد کو تناسب سے بڑھاتا ہے (متن، تصاویر، لے آؤٹ) - یہ ترجیحی طریقہ ہے - **صرف متن زوم**: فونٹ سائز کو بڑھاتا ہے جبکہ اصل لے آؤٹ کو برقرار رکھتا ہے - **پنچ ٹو زوم**: موبائل اشارے کی حمایت عارضی میگنیفیکیشن کے لیے - **براؤزر سپورٹ**: تمام جدید براؤزرز 500% تک زوم کی حمایت کرتے ہیں بغیر فعالیت کو توڑے **خصوصی میگنیفیکیشن سافٹ ویئر:** - **ونڈوز**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (بلٹ ان)، [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (بلٹ ان جدید خصوصیات کے ساتھ) > ⚠️ **ڈیزائن پر غور کریں**: WCAG کا تقاضا ہے کہ مواد 200% زوم پر فعال رہے۔ اس سطح پر، افقی اسکرولنگ کم سے کم ہونی چاہیے، اور تمام انٹرایکٹو عناصر قابل رسائی رہنے چاہئیں۔ ✅ **اپنے ذمہ دار ڈیزائن کا ٹیسٹ کریں**: اپنے براؤزر کو 200% اور 400% زوم کریں۔ کیا آپ کا لے آؤٹ خوبصورتی سے ڈھلتا ہے؟ کیا آپ اب بھی بغیر زیادہ اسکرولنگ کے تمام فعالیت تک رسائی حاصل کر سکتے ہیں؟ ## جدید قابل رسائی ٹیسٹنگ ٹولز اب جب کہ آپ سمجھ گئے ہیں کہ لوگ معاون ٹیکنالوجیز کے ساتھ ویب کو کیسے نیویگیٹ کرتے ہیں، آئیے ان ٹولز کو دریافت کریں جو آپ کو قابل رسائی ویب سائٹس بنانے اور ٹیسٹ کرنے میں مدد دیتے ہیں۔ اسے اس طرح سوچیں: خودکار ٹولز واضح مسائل (جیسے گمشدہ alt متن) کو پکڑنے میں زبردست ہیں، جبکہ ہاتھ سے ٹیسٹنگ آپ کو یہ یقینی بنانے میں مدد دیتی ہے کہ آپ کی سائٹ حقیقی دنیا میں استعمال کرنے کے لیے اچھی محسوس ہوتی ہے۔ دونوں مل کر آپ کو یہ اعتماد دیتے ہیں کہ آپ کی سائٹس سب کے لیے کام کرتی ہیں۔ ### رنگ کے تضاد کی جانچ یہ اچھی خبر ہے: رنگ کے تضاد سب سے عام قابل رسائی مسائل میں سے ایک ہے، لیکن یہ ٹھیک کرنے میں بھی سب سے آسان ہے۔ اچھا تضاد سب کے لیے فائدہ مند ہے—بصری معذوری والے صارفین سے لے کر ساحل پر اپنے فون پڑھنے کی کوشش کرنے والے افراد تک۔ **WCAG تضاد کے تقاضے:** | متن کی قسم | WCAG AA (کم از کم) | WCAG AAA (بہتر) | |-----------|-------------------|---------------------| | **عام متن** (18pt سے کم) | 4.5:1 تضاد تناسب | 7:1 تضاد تناسب | | **بڑا متن** (18pt+ یا 14pt+ بولڈ) | 3:1 تضاد تناسب | 4.5:1 تضاد تناسب | | **UI اجزاء** (بٹن، فارم بارڈرز) | 3:1 تضاد تناسب | 3:1 تضاد تناسب | **ضروری ٹیسٹنگ ٹولز:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - کلر پکر کے ساتھ ڈیسک ٹاپ ایپ - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - فوری فیڈبیک کے ساتھ ویب پر مبنی - [Stark](https://www.getstark.co/) - Figma، Sketch، Adobe XD کے لیے ڈیزائن ٹول پلگ ان - [Accessible Colors](https://accessible-colors.com/) - قابل رسائی رنگ پیلیٹس تلاش کریں ✅ **بہتر رنگ پیلیٹس بنائیں**: اپنے برانڈ کے رنگوں سے شروع کریں اور قابل رسائی تغیرات بنانے کے لیے تضاد چیکرز کا استعمال کریں۔ انہیں اپنے ڈیزائن سسٹم کے قابل رسائی رنگ ٹوکن کے طور پر دستاویز کریں۔ ### جامع قابل رسائی آڈٹ سب سے مؤثر قابل رسائی ٹیسٹنگ متعدد طریقوں کو یکجا کرتی ہے۔ کوئی ایک ٹول سب کچھ نہیں پکڑتا، لہذا مختلف طریقوں کے ساتھ ٹیسٹنگ روٹین بنانا مکمل کوریج کو یقینی بناتا ہے۔ **براؤزر پر مبنی ٹیسٹنگ (DevTools میں بلٹ ان):** - **Chrome/Edge**: لائٹ ہاؤس قابل رسائی آڈٹ + قابل رسائی پینل - **Firefox**: تفصیلی درخت منظر کے ساتھ قابل رسائی انسپکٹر - **Safari**: Web Inspector میں آڈٹ ٹیب VoiceOver سیمولیشن کے ساتھ **پروفیشنل ٹیسٹنگ ایکسٹینشنز:** - [axe DevTools](https://www.deque.com/axe/devtools/) - صنعت کا معیاری خودکار ٹیسٹنگ - [WAVE](https://wave.webaim.org/extension/) - غلطی کو نمایاں کرنے کے ساتھ بصری فیڈبیک - [Accessibility Insights](https://accessibilityinsights.io/) - مائیکروسافٹ کا جامع ٹیسٹنگ سوٹ **کمانڈ لائن اور CI/CD انٹیگریشن:** - [axe-core](https://github.com/dequelabs/axe-core) - خودکار ٹیسٹنگ کے لیے جاوا اسکرپٹ لائبریری - [Pa11y](https://pa11y.org/) - کمانڈ لائن قابل رسائی ٹیسٹنگ ٹول - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - خودکار قابل رسائی اسکورنگ > 🎯 **ٹیسٹنگ کا مقصد**: لائٹ ہاؤس قابل رسائی اسکور کو 95+ کے طور پر اپنا بنیادی معیار بنائیں۔ یاد رکھیں، خودکار ٹولز صرف 30-40% قابل رسائی مسائل کو پکڑتے ہیں—دستی ٹیسٹنگ اب بھی ضروری ہے! ## بنیاد سے قابل رسائی بنانا قابل رسائی کامیابی کی کلید یہ ہے کہ اسے پہلے دن سے اپنی بنیاد میں شامل کریں۔ مجھے معلوم ہے کہ یہ سوچنا پرکشش ہے "میں بعد میں قابل رسائی شامل کروں گا"، لیکن یہ بالکل ایسے ہے جیسے پہلے سے بنے ہوئے گھر میں ریمپ شامل کرنے کی کوشش کرنا۔ ممکن؟ ہاں۔ آسان؟ بالکل نہیں۔ قابل رسائی کو گھر کی منصوبہ بندی کی طرح سوچیں—ابتدائی معمارانہ منصوبوں میں وہیل چیئر کی رسائی شامل کرنا بہت آسان ہے بجائے اس کے کہ بعد میں سب کچھ دوبارہ بنایا جائے۔ ### POUR اصول: آپ کی قابل رسائی بنیاد ویب مواد کی قابل رسائی رہنما اصول (WCAG) چار بنیادی اصولوں کے ارد گرد بنائے گئے ہیں جو POUR کے طور پر بیان کرتے ہیں۔ پریشان نہ ہوں—یہ خشک علمی تصورات نہیں ہیں! یہ دراصل عملی رہنما ہیں جو ایسا مواد بنانے کے لیے ہیں جو سب کے لیے کام کرے۔ ایک بار جب آپ POUR کو سمجھ لیں، تو قابل رسائی فیصلے لینا بہت زیادہ آسان ہو جاتا ہے۔ یہ بالکل ایسے ہے جیسے آپ کے ڈیزائن کے انتخاب کی رہنمائی کے لیے ایک ذہنی چیک لسٹ ہو۔ آئیے اسے توڑتے ہیں: **🔍 قابل محسوس**: معلومات کو ایسے طریقوں سے پیش کیا جانا چاہیے جو صارفین اپنے دستیاب حواس کے ذریعے محسوس کر سکیں - غیر متن مواد (تصاویر، ویڈیوز، آڈیو) کے لیے متن کے متبادل فراہم کریں - تمام متن اور UI اجزاء کے لیے کافی رنگ کے تضاد کو یقینی بنائیں - ملٹی میڈیا مواد کے لیے کیپشنز اور ٹرانسکرپٹس پیش کریں - ایسا مواد ڈیزائن کریں جو 200% تک دوبارہ سائز کیے جانے پر فعال رہے - معلومات کو پہنچانے کے لیے متعدد حسی خصوصیات (صرف رنگ نہیں) استعمال کریں **🎮 قابل عمل**: تمام انٹرفیس اجزاء دستیاب ان پٹ طریقوں کے ذریعے قابل عمل ہونے چاہئیں - تمام فعالیت کو کی بورڈ نیویگیشن کے ذریعے قابل رسائی بنائیں - صارفین کو مواد پڑھنے اور اس کے ساتھ تعامل کرنے کے لیے کافی وقت فراہم کریں - ایسا مواد سے بچیں جو دورے یا ویسٹیبلر عوارض کا سبب بنے - صارفین کو واضح ساخت اور لینڈ مارکس کے ساتھ مؤثر طریقے سے نیویگیٹ کرنے میں مدد کریں - انٹرایکٹو عناصر کے لیے مناسب ہدف کے سائز کو یقینی بنائیں (کم از کم 44px) **📖 قابل فہم**: معلومات اور UI آپریشن واضح اور قابل فہم ہونا چاہیے - اپنے سامعین کے لیے مناسب واضح، سادہ زبان استعمال کریں - مواد کو پیش گوئی کے قابل، مستقل طریقوں سے ظاہر اور چلائیں - صارف ان پٹ کے لیے واضح ہدایات اور غلطی کے پیغامات فراہم کریں - صارفین کو فارم میں غلطیوں کو سمجھ رنگ مواصلات کے لیے ایک طاقتور ذریعہ ہے، لیکن یہ کبھی بھی اہم معلومات پہنچانے کا واحد طریقہ نہیں ہونا چاہیے۔ رنگ سے آگے ڈیزائن کرنا زیادہ مضبوط اور جامع تجربات تخلیق کرتا ہے جو مختلف حالات میں کام کرتے ہیں۔ **رنگ کی بصری فرق کے لیے ڈیزائن کریں:** تقریباً 8% مرد اور 0.5% خواتین کو رنگ کی بصری فرق کا سامنا ہوتا ہے (جسے اکثر "رنگ کی نابینا پن" کہا جاتا ہے)۔ سب سے عام اقسام یہ ہیں: - **Deuteranopia**: سرخ اور سبز کو الگ کرنے میں دشواری - **Protanopia**: سرخ زیادہ مدھم نظر آتا ہے - **Tritanopia**: نیلے اور پیلے کے ساتھ دشواری (نایاب) **جامع رنگ کی حکمت عملی:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **بنیادی تضاد کی ضروریات سے آگے:** - اپنے رنگ کے انتخاب کو رنگ کی نابینا پن کے سمیلیٹرز کے ساتھ آزمائیں - رنگ کوڈنگ کے ساتھ ساتھ پیٹرنز، ٹیکسچرز، یا شکلیں استعمال کریں - یقینی بنائیں کہ انٹرایکٹو حالتیں بغیر رنگ کے بھی قابل شناخت رہیں - غور کریں کہ آپ کا ڈیزائن ہائی کنٹراسٹ موڈ میں کیسا نظر آتا ہے ✅ **اپنی رنگ کی رسائی کو آزمائیں**: [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) جیسے ٹولز استعمال کریں تاکہ دیکھ سکیں کہ آپ کی سائٹ مختلف قسم کی رنگ کی بصری فرق رکھنے والے صارفین کے لیے کیسی نظر آتی ہے۔ ### فوکس انڈیکیٹرز اور انٹرایکشن ڈیزائن فوکس انڈیکیٹرز ڈیجیٹل کرسر کے برابر ہیں—یہ کی بورڈ صارفین کو دکھاتے ہیں کہ وہ صفحے پر کہاں ہیں۔ اچھی طرح سے ڈیزائن کردہ فوکس انڈیکیٹرز ہر کسی کے تجربے کو بہتر بناتے ہیں، انٹرایکشنز کو واضح اور پیش گوئی کے قابل بناتے ہیں۔ **جدید فوکس انڈیکیٹرز کے بہترین طریقے:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **فوکس انڈیکیٹرز کی ضروریات:** - **نظر آنے والا**: ارد گرد کے عناصر کے ساتھ کم از کم 3:1 کنٹراسٹ تناسب ہونا چاہیے - **چوڑائی**: پورے عنصر کے ارد گرد کم از کم 2px موٹائی - **استقامت**: جب تک فوکس کہیں اور منتقل نہ ہو، نظر آنا چاہیے - **امتیاز**: دیگر UI حالتوں سے بصری طور پر مختلف ہونا چاہیے > 💡 **ڈیزائن ٹپ**: بہترین فوکس انڈیکیٹرز اکثر آؤٹ لائن، باکس شیڈو، اور رنگ کی تبدیلیوں کا امتزاج استعمال کرتے ہیں تاکہ مختلف پس منظر اور سیاق و سباق میں نظر آنے کو یقینی بنایا جا سکے۔ ✅ **فوکس انڈیکیٹرز کا آڈٹ کریں**: اپنی ویب سائٹ پر ٹیب کریں اور نوٹ کریں کہ کون سے عناصر کے واضح فوکس انڈیکیٹرز ہیں۔ کیا کوئی دیکھنے میں مشکل یا مکمل طور پر غائب ہیں؟ ### سیمینٹک HTML: رسائی کی بنیاد سیمینٹک HTML آپ کی ویب سائٹ کے لیے معاون ٹیکنالوجیز کو GPS سسٹم دینے جیسا ہے۔ جب آپ صحیح HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کرتے ہیں، تو آپ بنیادی طور پر اسکرین ریڈرز، کی بورڈز، اور دیگر ٹولز کو ایک تفصیلی روڈ میپ فراہم کرتے ہیں تاکہ صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد ملے۔ یہاں ایک مثال ہے جو واقعی میرے لیے واضح ہوئی: سیمینٹک HTML ایک اچھی طرح سے منظم لائبریری کے درمیان فرق ہے جس میں واضح زمرے اور مددگار نشانات ہیں بمقابلہ ایک گودام جہاں کتابیں بے ترتیب بکھری ہوئی ہیں۔ دونوں جگہوں پر ایک ہی کتابیں ہیں، لیکن آپ کس جگہ پر کچھ تلاش کرنے کی کوشش کرنا پسند کریں گے؟ بالکل! **رسائی کے قابل صفحہ ڈھانچے کے بنیادی اجزاء:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **کیوں سیمینٹک HTML رسائی کو تبدیل کرتا ہے:** | سیمینٹک عنصر | مقصد | اسکرین ریڈر کا فائدہ | |------------------|---------|----------------------| | `
` | صفحہ یا سیکشن ہیڈر | "بینر لینڈ مارک" - اوپر جلدی نیویگیشن | | `