# قابل رسائی ویب صفحات بنانا
> اسکیچ نوٹ [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% زوم کریں۔ کیا آپ کا لے آؤٹ خوبصورتی سے ڈھلتا ہے؟ کیا آپ بغیر زیادہ اسکرولنگ کے تمام فعالیت تک رسائی حاصل کر سکتے ہیں؟
## جدید قابل رسائی ٹیسٹنگ ٹولز
اب جب کہ آپ سمجھ گئے ہیں کہ معاون ٹیکنالوجیز کیسے کام کرتی ہیں، آئیے ان ٹولز کا جائزہ لیتے ہیں جو آپ کو قابل رسائی ویب سائٹس بنانے اور ٹیسٹ کرنے میں مدد دیتے ہیں۔ خودکار ٹیسٹنگ کو دستی تصدیق کے ساتھ ملا کر آپ کو یقین ہوتا ہے کہ آپ کی سائٹس ہر کسی کے لیے کام کرتی ہیں۔
جدید قابل رسائی ٹیسٹنگ ایک جامع نقطہ نظر کی پیروی کرتی ہے: خودکار ٹولز واضح مسائل کو پکڑتے ہیں، جبکہ دستی ٹیسٹنگ حقیقی دنیا کی استعمال کو یقینی بناتی ہے۔
### رنگ کے تضاد کی جانچ
رنگ کے تضاد کے مسائل سب سے عام قابل رسائی مسائل میں سے ایک ہیں، لیکن یہ ٹھیک کرنے میں بھی سب سے آسان ہیں۔ اچھا تضاد ہر کسی کے لیے فائدہ مند ہے—بصری معذوری والے صارفین سے لے کر روشن دھوپ میں اسکرین دیکھنے والے افراد تک۔
**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**: ویب انسپکٹر میں آڈٹ ٹیب، 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 آپریشن واضح اور قابل فہم ہونا چاہیے
- اپنے سامعین کے لیے مناسب واضح، سادہ زبان استعمال کریں
- مواد کو پیش گوئی کے قابل، مستقل طریقوں سے ظاہر اور کام کرنے کو یقینی بنائیں
- صارف ان پٹ کے لیے واضح ہدایات اور غلطی کے پیغامات فراہم کریں
- صارفین کو فارم میں غلطیوں کو سمجھنے اور درست کرنے میں مدد کریں
- منطقی پڑھنے کے ترتیب اور معلوماتی درجہ بندی کے ساتھ مواد کو منظم کریں
**💪 مضبوط**: مواد مختلف ٹیکنالوجیز اور معاون آلات کے ساتھ قابل اعتماد کام کرنا چاہیے
- اپنی بنیاد کے طور پر درست، سیمینٹک HTML استعمال کریں
- موجودہ اور مستقبل کی معاون ٹیکنالوجیز کے ساتھ مطابقت کو یقینی بنائیں
- مارک اپ کے لیے ویب معیارات اور بہترین طریقوں پر عمل کریں
- مختلف براؤزرز، آلات، اور معاون ٹولز کے ساتھ ٹیسٹ کریں
- مواد کو اس طرح سے ساخت کریں کہ جب جدید خصوصیات کی حمایت نہ ہو تو یہ خوبصورتی سے کم ہو جائے
## قابل رسائی بصری ڈیزائن بنانا
اچھا بصری ڈیزائن اور قابل رسائی ایک دوسرے کے ساتھ چلتے ہیں۔ جب آپ قابل رسائی کو ذہن میں رکھتے ہوئے ڈیزائن کرتے ہیں، تو آپ اکثر یہ دریافت کرتے ہیں کہ یہ پابندیاں صاف، زیادہ خوبصورت حل کی طرف لے جاتی ہیں جو تمام صارفین کے لیے فائدہ مند ہیں۔
آئیے دیکھتے ہیں کہ بصری طور پر دلکش ڈیزائن کیسے بنائے جائیں جو ہر کسی کے لیے کام کریں، چاہے ان کی بصری صلاحیتیں کچھ بھی ہوں یا وہ آپ کے مواد کو دیکھنے کے لیے کن حالات میں ہوں۔
###
### فوکس انڈیکیٹرز اور انٹریکشن ڈیزائن
فوکس انڈیکیٹرز ڈیجیٹل کرسر کے برابر ہیں—یہ کی بورڈ استعمال کرنے والوں کو بتاتے ہیں کہ وہ صفحے پر کہاں ہیں۔ اچھے ڈیزائن کے فوکس انڈیکیٹرز ہر کسی کے تجربے کو بہتر بناتے ہیں، کیونکہ یہ انٹریکشنز کو واضح اور پیش گوئی کے قابل بناتے ہیں۔
**جدید فوکس انڈیکیٹرز کے بہترین اصول:**
```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 اسسٹیو ٹیکنالوجیز کے لیے ایک واضح نقشہ فراہم کرنے جیسا ہے۔ جب آپ HTML عناصر کو ان کے مطلوبہ مقصد کے لیے استعمال کرتے ہیں، تو آپ اسکرین ریڈرز، کی بورڈز، اور دیگر ٹولز کو وہ معلومات فراہم کرتے ہیں جو صارفین کو مؤثر طریقے سے نیویگیٹ کرنے میں مدد دیتی ہیں۔
سیمینٹک HTML کو ایک اچھی طرح سے منظم لائبریری کے ساتھ واضح زمرے اور نشانات کے مقابلے میں سوچیں، بمقابلہ ایک گودام جہاں کتابیں بے ترتیب بکھری ہوئی ہوں۔ دونوں میں ایک جیسی معلومات ہوتی ہیں، لیکن صرف ایک واقعی قابل استعمال ہے۔
**رسائی کے قابل صفحہ ڈھانچے کے بنیادی اجزاء:**
```html
Your Site Name
Article Title
Published on
First Section
Content that relates to this section...
Second Section
More related content...
```
**سیمینٹک HTML رسائی کو کیسے تبدیل کرتا ہے:**
| سیمینٹک عنصر | مقصد | اسکرین ریڈر کا فائدہ |
|------------------|---------|----------------------|
| `` | صفحہ یا سیکشن ہیڈر | "بینر لینڈ مارک" - اوپر جلدی نیویگیشن |
| `