یہ قابلِ رسائی ویب اجزاء بنانے کے لیے ایک گائیڈ ہے آپ ایسے ویب اجزاء بنانا چاہتے ہیں جو بہترین طریقے سے کام کریں اور قابلِ رسائی ہوں۔ اس مقصد میں آپ کی مدد کے لیے یہاں ایک گائیڈ موجود ہے۔
- ایک ایسا دوبارہ استعمال ہونے والا (reusable) ویب کمپوننٹ بنائیں جو ایک صاف ستھرا API فراہم کرے۔
- ARIA attributes اور کی بورڈ سپورٹ کے ذریعے قابلِ رسائی (accessibility) کو یقینی بنائیں۔
- Shadow DOM اور lazy rendering کے ذریعے کارکردگی (performance) کو بہتر بنائیں۔
- کسی فریم ورک پر انحصار کیے بغیر تھیمنگ (theming) اور رسپانسیو ڈیزائن (responsiveness) فراہم کریں۔
- مقامی طور پر چلانے کے لیے ٹیسٹ اور ایک چھوٹا سا بلڈ سیٹ اپ (build setup) شامل کریں۔
اہم نتائج:
- ایک ڈراپ ان (drop-in) پروفائل کارڈ ویب کمپوننٹ جسے آپ متعدد ایپس میں استعمال کر سکتے ہیں۔
- کمپوننٹ کے لاجک (logic)، اسٹائلنگ اور ڈیٹا کے درمیان واضح علیحدگی۔
- اضافی سلاٹس (slots)، پراپس (props) یا مائیکرو انٹرایکشنز (micro-interactions) کے ذریعے کمپوننٹ کو وسعت دینے کے لیے ایک گائیڈ۔
آپ اس کمپوننٹ کو اپنے HTML میں اس طرح استعمال کر سکتے ہیں:
<profile-card id="pc" name="Alex" title="Engineer">
<span slot="bio">Custom bio here.</span>
<span slot="social">Twitter: @alex</span>
</profile-card>
یہ کمپوننٹ اسٹائلز کو محفوظ رکھنے (encapsulate) اور انہیں پھیلنے (leakage) سے روکنے کے لیے Shadow DOM کا استعمال کرتا ہے۔ یہ تھیمنگ کے لیے CSS variables اور قابلِ رسائی کے لیے ARIA attributes کا بھی استعمال کرتا ہے۔