> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الويب العالمية
هذا الاقتباس يبرز بشكل مثالي أهمية إنشاء مواقع ويب قابلة للوصول. التطبيق الذي لا يمكن للجميع الوصول إليه هو بطبيعته إقصائي. كمطوري ويب، يجب أن نضع إمكانية الوصول دائمًا في الاعتبار. من خلال التركيز على هذا الجانب منذ البداية، ستكون في طريقك لضمان أن الجميع يمكنهم الوصول إلى الصفحات التي تنشئها. في هذه الدرس، ستتعلم عن الأدوات التي يمكن أن تساعدك في ضمان أن موارد الويب الخاصة بك قابلة للوصول وكيفية البناء مع مراعاة إمكانية الوصول.
هذه الاقتباسة تسلط الضوء بشكل مثالي على أهمية إنشاء مواقع ويب قابلة للوصول. التطبيق الذي لا يمكن للجميع الوصول إليه هو بطبيعته إقصائي. كمطوري ويب، يجب أن نضع إمكانية الوصول دائمًا في الاعتبار. من خلال التركيز على هذا الجانب منذ البداية، ستكون في طريقك لضمان أن الجميع يمكنهم الوصول إلى الصفحات التي تنشئها. في هذه الدرس، ستتعلم عن الأدوات التي يمكن أن تساعدك في ضمان أن موارد الويب الخاصة بك قابلة للوصول وكيفية البناء مع مراعاة إمكانية الوصول.
> يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
@ -29,9 +29,9 @@ CO_OP_TRANSLATOR_METADATA:
من بين أدوات إمكانية الوصول الأكثر شهرة هي قارئات الشاشة.
[قارئات الشاشة](https://en.wikipedia.org/wiki/Screen_reader) هي عملاء شائعون للأشخاص الذين يعانون من ضعف البصر. بينما نقضي الوقت في ضمان أن المتصفح ينقل المعلومات التي نرغب في مشاركتها بشكل صحيح، يجب علينا أيضًا ضمان أن قارئ الشاشة يقوم بنفس الشيء.
[قارئات الشاشة](https://en.wikipedia.org/wiki/Screen_reader) هي عملاء شائعون للأشخاص الذين يعانون من ضعف البصر. كما نقضي الوقت لضمان أن المتصفح ينقل المعلومات التي نرغب في مشاركتها بشكل صحيح، يجب علينا أيضًا ضمان أن قارئ الشاشة يقوم بنفس الشيء.
بأبسط أشكاله، يقوم قارئ الشاشة بقراءة الصفحة من الأعلى إلى الأسفل بشكل مسموع. إذا كانت صفحتك تحتوي على نص فقط، فسيقوم القارئ بنقل المعلومات بطريقة مشابهة للمتصفح. بالطبع، نادرًا ما تكون صفحات الويب نصية فقط؛ فهي تحتوي على روابط، ورسومات، وألوان، ومكونات بصرية أخرى. يجب أن يتم الاهتمام لضمان أن هذه المعلومات تُقرأ بشكل صحيح بواسطة قارئ الشاشة.
بأبسط أشكاله، يقوم قارئ الشاشة بقراءة الصفحة من الأعلى إلى الأسفل بشكل مسموع. إذا كانت صفحتك تحتوي على نص فقط، فسيقوم القارئ بنقل المعلومات بطريقة مشابهة للمتصفح. بالطبع، نادرًا ما تكون صفحات الويب نصية فقط؛ فهي تحتوي على روابط، ورسومات، وألوان، ومكونات بصرية أخرى. يجب أن يتم أخذ الحذر لضمان أن هذه المعلومات تُقرأ بشكل صحيح بواسطة قارئ الشاشة.
يجب على كل مطور ويب أن يتعرف على قارئ الشاشة. كما هو مذكور أعلاه، فهو العميل الذي سيستخدمه المستخدمون. بنفس الطريقة التي تعرف بها كيفية عمل المتصفح، يجب أن تتعلم كيفية عمل قارئ الشاشة. لحسن الحظ، يتم تضمين قارئات الشاشة في معظم أنظمة التشغيل.
@ -43,11 +43,11 @@ CO_OP_TRANSLATOR_METADATA:
أداة أخرى تُستخدم بشكل شائع من قبل الأشخاص الذين يعانون من ضعف البصر هي التكبير. النوع الأكثر أساسية من التكبير هو التكبير الثابت، الذي يتم التحكم فيه من خلال `Control + علامة زائد (+)` أو عن طريق تقليل دقة الشاشة. هذا النوع من التكبير يؤدي إلى إعادة حجم الصفحة بالكامل، لذا فإن استخدام [تصميم متجاوب](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) مهم لتوفير تجربة مستخدم جيدة عند مستويات التكبير العالية.
نوع آخر من التكبير يعتمد على برامج متخصصة لتكبير منطقة واحدة من الشاشة والتحرك، مثل استخدام عدسة مكبرة حقيقية. على نظام Windows، يتم تضمين [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/).
نوع آخر من التكبير يعتمد على برامج متخصصة لتكبير منطقة واحدة من الشاشة والتحريك، مثل استخدام عدسة مكبرة حقيقية. على نظام Windows، يتم تضمين [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](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). ماذا تعلمت؟
@ -75,9 +75,9 @@ CO_OP_TRANSLATOR_METADATA:
### استخدام HTML الصحيح
مع CSS و JavaScript، من الممكن جعل أي عنصر يبدو كأي نوع من عناصر التحكم. يمكن استخدام `<span>` لإنشاء `<button>`، ويمكن أن يصبح `<b>` رابطًا. بينما قد يُعتبر هذا أسهل للتنسيق، فإنه لا ينقل أي شيء لقارئ الشاشة. استخدم HTML المناسب عند إنشاء عناصر التحكم على الصفحة. إذا كنت تريد رابطًا، استخدم `<a>`. استخدام HTML الصحيح لعناصر التحكم الصحيحة يُعرف باستخدام HTML الدلالي.
مع CSS و JavaScript، من الممكن جعل أي عنصر يبدو كأي نوع من عناصر التحكم. يمكن استخدام `<span>` لإنشاء `<button>`، ويمكن أن يصبح `<b>` رابطًا. بينما قد يُعتبر هذا أسهل في التصميم، فإنه لا ينقل أي شيء لقارئ الشاشة. استخدم HTML المناسب عند إنشاء عناصر التحكم على الصفحة. إذا كنت تريد رابطًا، استخدم `<a>`. استخدام HTML الصحيح للعناصر المناسبة يُعرف باستخدام HTML الدلالي.
✅ انتقل إلى أي موقع ويب وتحقق مما إذا كان المصممون والمطورون يستخدمون HTML بشكل صحيح. هل يمكنك العثور على زر يجب أن يكون رابطًا؟ تلميح: انقر بزر الماوس الأيمن واختر "عرض مصدر الصفحة" في متصفحك لمشاهدة الكود الأساسي.
✅ اذهب إلى أي موقع ويب وتحقق مما إذا كان المصممون والمطورون يستخدمون HTML بشكل صحيح. هل يمكنك العثور على زر يجب أن يكون رابطًا؟ تلميح: انقر بزر الماوس الأيمن واختر "عرض مصدر الصفحة" في متصفحك لرؤية الكود الأساسي.
### إنشاء تسلسل عناوين وصفي
@ -85,35 +85,35 @@ CO_OP_TRANSLATOR_METADATA:
### استخدام أدلة بصرية جيدة
يوفر CSS تحكمًا كاملاً في مظهر أي عنصر على الصفحة. يمكنك إنشاء مربعات نصوص بدون إطار أو روابط بدون خط تحتها. للأسف، إزالة هذه الأدلة يمكن أن يجعل من الصعب على شخص يعتمد عليها التعرف على نوع عنصر التحكم.
يوفر CSS تحكمًا كاملاً في مظهر أي عنصر على الصفحة. يمكنك إنشاء مربعات نصية بدون إطار أو روابط بدون خط تحتها. للأسف، إزالة هذه الأدلة يمكن أن يجعل من الصعب على شخص يعتمد عليها التعرف على نوع العنصر.
## أهمية نصوص الروابط
## أهمية نص الرابط
الروابط التشعبية هي جوهر التنقل في الويب. نتيجة لذلك، ضمان أن قارئ الشاشة يمكنه قراءة الروابط بشكل صحيح يسمح لجميع المستخدمين بالتنقل في موقعك.
الروابط هي جوهر التنقل في الويب. لذلك، ضمان أن قارئ الشاشة يمكنه قراءة الروابط بشكل صحيح يسمح لجميع المستخدمين بالتنقل في موقعك.
### قارئات الشاشة والروابط
كما هو متوقع، تقرأ قارئات الشاشة نصوص الروابط بنفس الطريقة التي تقرأ بها أي نص آخر على الصفحة. مع وضع ذلك في الاعتبار، قد يبدو النص الموضح أدناه مقبولًا تمامًا.
كما هو متوقع، تقرأ قارئات الشاشة نص الرابط بنفس الطريقة التي تقرأ بها أي نص آخر على الصفحة. مع وضع ذلك في الاعتبار، قد يبدو النص الموضح أدناه مقبولًا تمامًا.
> البطريق الصغير، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم. [اضغط هنا](https://en.wikipedia.org/wiki/Little_penguin) لمزيد من المعلومات.
> البطريق الصغير، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم. قم بزيارة https://en.wikipedia.org/wiki/Little_penguin لمزيد من المعلومات.
> **NOTE** كما ستقرأ الآن، يجب **ألا** تنشئ روابط تبدو مثل الأمثلة أعلاه.
> **NOTE** كما ستقرأ الآن، يجب **ألا** تنشئ روابط تبدو مثل ما سبق.
تذكر، قارئات الشاشة هي واجهة مختلفة عن المتصفحات مع مجموعة ميزات مختلفة.
تذكر، قارئات الشاشة هي واجهة مختلفة عن المتصفحات ولها مجموعة ميزات مختلفة.
### المشكلة مع استخدام عنوان URL
تقرأ قارئات الشاشة النص. إذا ظهر عنوان URL في النص، فستقرأ قارئات الشاشة عنوان URL. بشكل عام، لا ينقل عنوان URL معلومات ذات معنى، وقد يبدو مزعجًا. ربما تكون قد واجهت هذا إذا قرأ هاتفك رسالة نصية تحتوي على عنوان URL بصوت عالٍ.
تقرأ قارئات الشاشة النص. إذا ظهر عنوان URL في النص، فستقرأ قارئ الشاشة عنوان URL. بشكل عام، لا ينقل عنوان URL معلومات ذات معنى، وقد يبدو مزعجًا. ربما تكون قد واجهت هذا إذا قرأ هاتفك رسالة نصية تحتوي على عنوان URL بصوت عالٍ.
### المشكلة مع "اضغط هنا"
قارئات الشاشة لديها أيضًا القدرة على قراءة الروابط فقط على الصفحة، بنفس الطريقة التي يقوم بها الشخص المبصر بمسح الصفحة بحثًا عن الروابط. إذا كان نص الرابط دائمًا "اضغط هنا"، فكل ما سيسمعه المستخدم هو "اضغط هنا، اضغط هنا، اضغط هنا، اضغط هنا، اضغط هنا، ..." الآن أصبحت جميع الروابط غير مميزة عن بعضها البعض.
### نصوص الروابط الجيدة
### نص الرابط الجيد
نصوص الروابط الجيدة تصف بإيجاز ما يوجد على الجانب الآخر من الرابط. في المثال أعلاه الذي يتحدث عن البطريق الصغير، الرابط هو إلى صفحة ويكيبيديا عن النوع. العبارة *البطريق الصغير* ستكون نص رابط مثالي لأنها توضح بوضوح ما سيتعلمه الشخص إذا ضغط على الرابط - البطريق الصغير.
نص الرابط الجيد يصف بإيجاز ما يوجد على الجانب الآخر من الرابط. في المثال أعلاه الذي يتحدث عن البطريق الصغير، الرابط هو إلى صفحة ويكيبيديا عن النوع. العبارة *البطريق الصغير* ستكون نص رابط مثالي لأنها توضح بوضوح ما سيتعلمه الشخص إذا ضغط على الرابط - البطريق الصغير.
> [البطريق الصغير](https://en.wikipedia.org/wiki/Little_penguin)، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم.
@ -121,7 +121,7 @@ CO_OP_TRANSLATOR_METADATA:
#### ملاحظات محركات البحث
كمكافأة إضافية لضمان أن موقعك قابل للوصول للجميع، ستساعد محركات البحث في التنقل في موقعك أيضًا. تستخدم محركات البحث نصوص الروابط لفهم مواضيع الصفحات. لذا فإن استخدام نصوص روابط جيدة يساعد الجميع!
كمكافأة إضافية لضمان أن موقعك قابل للوصول للجميع، ستساعد محركات البحث في التنقل في موقعك أيضًا. تستخدم محركات البحث نص الرابط لفهم موضوعات الصفحات. لذا فإن استخدام نص رابط جيد يساعد الجميع!
في هذا المثال، تكرار نصوص الوصف والطلب منطقي لشخص يستخدم المتصفح. ومع ذلك، شخص يستخدم قارئ الشاشة سيسمع فقط الكلمات *الوصف* و *الطلب* مكررة بدون سياق.
في هذا المثال، تكرار نص الوصف والطلب منطقي لشخص يستخدم المتصفح. ومع ذلك، شخص يستخدم قارئ الشاشة سيسمع فقط الكلمات *الوصف* و *الطلب* مكررة بدون سياق.
لدعم هذه الأنواع من السيناريوهات، يدعم HTML مجموعة من السمات تُعرف باسم [تطبيقات الإنترنت الغنية القابلة للوصول (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). تسمح هذه السمات بتوفير معلومات إضافية لقارئات الشاشة.
✅ بشكل عام، استخدام العلامات الدلالية كما هو موضح أعلاه يتفوق على استخدام ARIA، ولكن في بعض الأحيان لا يوجد مكافئ دلالي لعناصر HTML المختلفة. مثال جيد هو الشجرة. لا يوجد مكافئ HTML للشجرة، لذا يمكنك تحديد `<div>` العامة لهذا العنصر بدور وقيم aria المناسبة. يحتوي [توثيق MDN حول ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) على معلومات أكثر فائدة.
✅ بشكل عام، استخدام العلامات الدلالية كما هو موضح أعلاه يتفوق على استخدام ARIA، ولكن في بعض الأحيان لا يوجد مكافئ دلالي لعناصر HTML المختلفة. مثال جيد هو الشجرة. لا يوجد مكافئ HTML للشجرة، لذا تحدد العنصر العام `<div>` لهذه العنصر بدور وقيم aria المناسبة. يحتوي [توثيق MDN حول ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) على معلومات أكثر فائدة.
```html
<h2id="tree-label">File Viewer</h2>
@ -155,16 +155,15 @@ CO_OP_TRANSLATOR_METADATA:
## الصور
من البديهي أن قارئات الشاشة غير قادرة على قراءة ما يوجد في الصورة تلقائيًا. ضمان أن الصور قابلة للوصول لا يتطلب الكثير من العمل - هذا هو الغرض من سمة `alt`. يجب أن تحتوي جميع الصور ذات المعنى على `alt` لوصف ما هي عليه.
الصور التي تكون زخرفية فقط يجب أن تحتوي على سمة `alt` فارغة: `alt=""`. هذا يمنع قارئات الشاشة من الإعلان عن الصورة الزخرفية بشكل غير ضروري.
من البديهي أن قارئات الشاشة غير قادرة على قراءة ما يوجد في الصورة تلقائيًا. ضمان أن الصور قابلة للوصول لا يتطلب الكثير من العمل - هذا هو الغرض من السمة `alt`. يجب أن تحتوي جميع الصور ذات المعنى على `alt` لوصف ما هي عليه. الصور التي تكون زخرفية فقط يجب أن تحتوي على السمة `alt` فارغة: `alt=""`. هذا يمنع قارئات الشاشة من الإعلان عن الصورة الزخرفية بشكل غير ضروري.
✅ كما قد تتوقع، محركات البحث أيضًا غير قادرة على فهم ما يوجد في الصورة. تستخدم أيضًا نصوص alt. لذا مرة أخرى، ضمان أن صفحتك قابلة للوصول يوفر مكافآت إضافية!
✅ كما قد تتوقع، محركات البحث أيضًا غير قادرة على فهم ما يوجد في الصورة. تستخدم أيضًا نص alt. لذا مرة أخرى، ضمان أن صفحتك قابلة للوصول يوفر مكافآت إضافية!
## لوحة المفاتيح
بعض المستخدمين غير قادرين على استخدام الماوس أو لوحة التتبع، ويعتمدون بدلاً من ذلك على تفاعلات لوحة المفاتيح للتنقل من عنصر إلى آخر. من المهم أن يقدم موقع الويب الخاص بك محتواه بترتيب منطقي بحيث يمكن لمستخدم لوحة المفاتيح الوصول إلى كل عنصر تفاعلي أثناء التنقل في المستند. إذا قمت ببناء صفحات الويب الخاصة بك باستخدام علامات دلالية واستخدمت CSS لتنسيق تخطيطها البصري، يجب أن يكون موقعك قابلاً للتنقل باستخدام لوحة المفاتيح، ولكن من المهم اختبار هذا الجانب يدويًا. تعرف على المزيد حول [استراتيجيات التنقل باستخدام لوحة المفاتيح](https://webaim.org/techniques/keyboard/).
بعض المستخدمين غير قادرين على استخدام الماوس أو لوحة التتبع، ويعتمدون بدلاً من ذلك على التفاعلات عبر لوحة المفاتيح للتنقل من عنصر إلى آخر. من المهم أن يقدم موقع الويب الخاص بك محتواه بترتيب منطقي بحيث يمكن لمستخدم لوحة المفاتيح الوصول إلى كل عنصر تفاعلي أثناء التنقل عبر المستند. إذا قمت ببناء صفحات الويب الخاصة بك باستخدام علامات دلالية واستخدمت CSS لتصميم تخطيطها البصري، يجب أن يكون موقعك قابلًا للتنقل عبر لوحة المفاتيح، ولكن من المهم اختبار هذا الجانب يدويًا. تعرف على المزيد حول [استراتيجيات التنقل عبر لوحة المفاتيح](https://webaim.org/techniques/keyboard/).
✅ انتقل إلى أي موقع ويب وحاول التنقل فيه باستخدام لوحة المفاتيح فقط. ما الذي يعمل، وما الذي لا يعمل؟ لماذا؟
✅ اذهب إلى أي موقع ويب وحاول التنقل فيه باستخدام لوحة المفاتيح فقط. ما الذي يعمل، وما الذي لا يعمل؟ لماذا؟
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/en/)
## المراجعة والدراسة الذاتية
تضع العديد من الحكومات قوانين تتعلق بمتطلبات الوصول. قم بالاطلاع على قوانين الوصول في بلدك. ما الذي يتم تغطيته، وما الذي لا يتم تغطيته؟ مثال على ذلك هو [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
تضع العديد من الحكومات قوانين تتعلق بمتطلبات الوصول. قم بالاطلاع على قوانين الوصول في بلدك. ما الذي يتم تغطيته وما الذي لا يتم تغطيته؟ مثال على ذلك هو [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
## المهمة
[قم بتحليل موقع ويب غير قابل للوصول](assignment.md)
[تحليل موقع ويب غير قابل للوصول](assignment.md)
الحقوق: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) بواسطة Instrument
الاعتمادات: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) بواسطة Instrument
---
**إخلاء المسؤولية**:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असो वा नसो, प्रत्येकासाठी प्रवेश हा एक आवश्यक पैलू आहे.
> वेबची ताकद त्याच्या सार्वत्रिकतेत आहे. अपंगत्व असो वा नसो, प्रत्येकासाठी प्रवेश हा एक महत्त्वाचा पैलू आहे.
>
> \- सर टिमोथी बर्नर्स-ली, W3C संचालक आणि वर्ल्ड वाइड वेबचे शोधक
ही उद्धरण सुलभ वेबसाइट्स तयार करण्याचे महत्त्व उत्तम प्रकारे अधोरेखित करते. ज्या अॅप्लिकेशनमध्ये सर्वांना प्रवेश करता येत नाही, ते मूलतः वगळणारे आहे. वेब डेव्हलपर म्हणून आपल्याला नेहमी सुलभतेचा विचार करायला हवा. सुरुवातीपासूनच यावर लक्ष केंद्रित केल्याने आपण तयार केलेल्या पृष्ठांमध्ये सर्वांना प्रवेश मिळेल याची खात्री करण्याच्या दिशेने आपण चांगल्या प्रकारे पुढे जाल. या धड्यात, आपण आपल्या वेब अॅसेट्स सुलभ आहेत याची खात्री करण्यासाठी मदत करणाऱ्या साधनांबद्दल शिकाल आणि सुलभतेचा विचार करून कसे तयार करावे हे शिकाल.
ही उद्धरण सुलभ वेबसाइट्स तयार करण्याचे महत्त्व उत्तम प्रकारे अधोरेखित करते. जर एखाद्या अॅप्लिकेशनमध्ये सर्वांना प्रवेश करता येत नसेल, तर ते आपोआप वगळले जाते. वेब डेव्हलपर्स म्हणून आपल्याला नेहमी सुलभतेचा विचार करायला हवा. सुरुवातीपासूनच यावर लक्ष केंद्रित केल्यास आपण तयार केलेल्या पृष्ठांमध्ये सर्वांना प्रवेश मिळेल याची खात्री करण्याच्या दिशेने आपण चांगल्या प्रकारे पुढे जाल. या धड्यात, आपण आपल्या वेब अॅसेट्स सुलभ आहेत याची खात्री करण्यासाठी मदत करणाऱ्या साधनांबद्दल शिकाल आणि सुलभतेचा विचार करून कसे तयार करावे हे शिकाल.
> आपण [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) वर हा धडा घेऊ शकता!
@ -29,75 +29,75 @@ CO_OP_TRANSLATOR_METADATA:
सर्वात प्रसिद्ध सुलभता साधनांपैकी एक म्हणजे स्क्रीन रीडर्स.
[स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) हे दृष्टीदोष असलेल्या लोकांसाठी सामान्यतः वापरले जाणारे क्लायंट आहेत. ब्राउझर योग्य प्रकारे आपल्याला शेअर करायची माहिती देतो याची खात्री करण्यासाठी आपण वेळ घालवतो, त्याचप्रमाणे स्क्रीन रीडर देखील तेच करतो याची खात्री करणे आवश्यक आहे.
[स्क्रीन रीडर्स](https://en.wikipedia.org/wiki/Screen_reader) हे दृष्टीदोष असलेल्या लोकांसाठी सामान्यतः वापरले जाणारे क्लायंट आहेत. आपण ब्राउझर योग्य प्रकारे आपल्याला शेअर करायची माहिती देत आहे याची खात्री करण्यासाठी वेळ घालवतो, त्याचप्रमाणे स्क्रीन रीडर देखील तेच करत आहे याची खात्री करणे आवश्यक आहे.
त्याच्या मूलभूत स्वरूपात, स्क्रीन रीडर पृष्ठ वरून खाली ऐकण्यायोग्य वाचतो. जर आपले पृष्ठ सर्व मजकूर असेल, तर वाचक ब्राउझरप्रमाणेच माहिती देईल. अर्थात, वेब पृष्ठे क्वचितच शुद्ध मजकूर असतात; त्यामध्ये दुवे, ग्राफिक्स, रंग आणि इतर दृश्य घटक असतात. स्क्रीन रीडरने ही माहिती योग्य प्रकारे वाचली जाईल याची काळजी घेणे आवश्यक आहे.
स्क्रीन रीडर मूलभूत स्वरूपात पृष्ठ वरून खाली ऐकवतो. जर आपले पृष्ठ पूर्णपणे मजकूर असेल, तर रीडर ब्राउझरप्रमाणेच माहिती देईल. अर्थात, वेब पृष्ठे क्वचितच पूर्णपणे मजकूर असतात; त्यामध्ये दुवे, ग्राफिक्स, रंग आणि इतर दृश्य घटक असतात. स्क्रीन रीडरने ही माहिती योग्य प्रकारे वाचली जावी याची काळजी घेणे आवश्यक आहे.
प्रत्येक वेब डेव्हलपरने स्क्रीन रीडरशी परिचित असले पाहिजे. वर नमूद केल्याप्रमाणे, हे आपल्या वापरकर्त्यांनी वापरलेले क्लायंट आहे. ज्या प्रकारे आपण ब्राउझर कसा कार्य करतो याबद्दल परिचित आहात, त्याचप्रमाणे स्क्रीन रीडर कसा कार्य करतो हे शिकले पाहिजे. सुदैवाने, स्क्रीन रीडर्स बहुतेक ऑपरेटिंग सिस्टममध्ये अंगभूत आहेत.
प्रत्येक वेब डेव्हलपरने स्क्रीन रीडरशी परिचित असले पाहिजे. वर नमूद केल्याप्रमाणे, हे आपल्या वापरकर्त्यांनी वापरणारे क्लायंट आहे. जसे आपण ब्राउझर कसे कार्य करते याबद्दल परिचित आहात, तसेच स्क्रीन रीडर कसे कार्य करते हे शिकले पाहिजे. सुदैवाने, स्क्रीन रीडर्स बहुतेक ऑपरेटिंग सिस्टममध्ये अंगभूत असतात.
काही ब्राउझरमध्ये अंगभूत साधने आणि विस्तार आहेत जे मजकूर मोठ्याने वाचू शकतात किंवा अगदी मूलभूत नेव्हिगेशन वैशिष्ट्ये प्रदान करू शकतात, जसे की [या सुलभतेवर केंद्रित Edge ब्राउझर साधने](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). ही देखील महत्त्वाची सुलभता साधने आहेत, परंतु स्क्रीन रीडर चाचणी साधनांसाठी त्यांची चूक होऊ नये.
काही ब्राउझरमध्ये अंगभूत साधने आणि विस्तार आहेत जे मजकूर मोठ्याने वाचू शकतात किंवा काही मूलभूत नेव्हिगेशन वैशिष्ट्ये प्रदान करू शकतात, जसे की [Edge ब्राउझरचे सुलभतेवर लक्ष केंद्रित करणारे साधने](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). ही देखील महत्त्वाची सुलभता साधने आहेत, परंतु ती स्क्रीन रीडर चाचणी साधनांशी गोंधळून जाऊ नयेत.
✅ स्क्रीन रीडर आणि ब्राउझर मजकूर वाचक वापरून पहा. Windows वर [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) डीफॉल्टने समाविष्ट आहे, आणि [JAWS](https://webaim.org/articles/jaws/) आणि [NVDA](https://www.nvaccess.org/about-nvda/) देखील स्थापित केले जाऊ शकतात. macOS आणि iOS वर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डीफॉल्टने स्थापित आहे.
### झूम
दृष्टीदोष असलेल्या लोकांद्वारे सामान्यतः वापरले जाणारे आणखी एक साधन म्हणजे झूमिंग. झूमिंगचा सर्वात मूलभूत प्रकार म्हणजे स्थिर झूम, जो`Control + plus sign (+)` द्वारे किंवा स्क्रीन रिझोल्यूशन कमी करून नियंत्रित केला जातो. या प्रकारच्या झूममुळे संपूर्ण पृष्ठाचा आकार बदलतो, त्यामुळे [प्रतिसादात्मक डिझाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) वापरणे वाढलेल्या झूम स्तरांवर चांगला वापरकर्ता अनुभव प्रदान करण्यासाठी महत्त्वाचे आहे.
दृष्टीदोष असलेल्या लोकांद्वारे सामान्यतः वापरले जाणारे आणखी एक साधन म्हणजे झूमिंग. सर्वात मूलभूत प्रकारचे झूमिंग म्हणजे स्थिर झूम, जे`Control + plus sign (+)` द्वारे किंवा स्क्रीन रिझोल्यूशन कमी करून नियंत्रित केले जाते. या प्रकारचे झूम संपूर्ण पृष्ठाचा आकार बदलतो, त्यामुळे [प्रतिसादात्मक डिझाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) वापरणे वाढलेल्या झूम स्तरांवर चांगला वापरकर्ता अनुभव प्रदान करण्यासाठी महत्त्वाचे आहे.
झूमिंगचा दुसरा प्रकार विशेष सॉफ्टवेअरवर अवलंबून असतो जे स्क्रीनच्या एका भागाचा आकार वाढवते आणि पॅन करते, जसे की वास्तविक मॅग्निफाइंग ग्लास वापरणे. Windows वर, [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/) नावाचे अंगभूत वाढवणारे सॉफ्टवेअर आहे.
झूमचा दुसरा प्रकार विशेष सॉफ्टवेअरवर अवलंबून असतो जे स्क्रीनच्या एका भागाचा आकार वाढवते आणि पॅन करते, जसे की वास्तविक मॅग्निफाइंग ग्लास वापरणे. Windows वर, [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 च्या रंग तपासक](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) सह रंग वापरासाठी आपल्याला आवडणाऱ्या वेबसाइटची चाचणी करा. तुम्हाला काय शिकायला मिळते?
✅ ब्राउझर विस्तारासह [WCAG चा रंग तपासक](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) वापरून आपल्याला आवडणाऱ्या वेबसाइटसाठी रंग वापर तपासा. तुम्हाला काय शिकायला मिळते?
### Lighthouse
आपल्या ब्राउझरच्या डेव्हलपर टूल क्षेत्रात, आपल्याला Lighthouse साधन सापडेल. हे साधन वेबसाइटच्या सुलभतेचा (तसेच इतर विश्लेषण) पहिला आढावा घेण्यासाठी महत्त्वाचे आहे. Lighthouse वर पूर्णपणे अवलंबून राहणे महत्त्वाचे नसले तरी, 100% स्कोअर बेसलाइन म्हणून खूप उपयुक्त आहे.
आपल्या ब्राउझरच्या डेव्हलपर टूल क्षेत्रात, आपल्याला Lighthouse साधन सापडेल. हे साधन वेबसाइटच्या सुलभतेचे (तसेच इतर विश्लेषण) पहिले दृश्य मिळवण्यासाठी महत्त्वाचे आहे. Lighthouse वर पूर्णपणे अवलंबून राहणे महत्त्वाचे नाही, परंतु 100% स्कोअर एक चांगला आधार आहे.
✅ आपल्या ब्राउझरच्या डेव्हलपर टूल पॅनेलमध्ये Lighthouse शोधा आणि कोणत्याही साइटवर विश्लेषण चालवा. तुम्हाला काय सापडते?
## सुलभतेसाठी डिझाइन करणे
सुलभता हा तुलनेने मोठा विषय आहे. आपल्याला मदत करण्यासाठी, अनेक संसाधने उपलब्ध आहेत.
सुलभता हा तुलनेने मोठा विषय आहे. आपल्याला मदत करण्यासाठी अनेक संसाधने उपलब्ध आहेत.
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
आपण सुलभ साइट्स तयार करण्याच्या प्रत्येक पैलूवर चर्चा करू शकणार नाही, परंतु खाली काही मुख्य तत्त्वे दिली आहेत जी आपण अंमलात आणू इच्छिता. सुरुवातीपासून सुलभ पृष्ठ डिझाइन करणे **नेहमीच** विद्यमान पृष्ठ सुलभ बनवण्यासाठी परत जाण्यापेक्षा सोपे असते.
आपण सुलभ साइट्स तयार करण्याच्या प्रत्येक पैलूवर चर्चा करू शकणार नाही, परंतु खाली काही मुख्य तत्त्वे दिली आहेत जी आपण अंमलात आणू इच्छिता. सुरुवातीपासून सुलभ पृष्ठ डिझाइन करणे **नेहमीच** विद्यमान पृष्ठ सुलभ बनवण्यापेक्षा सोपे असते.
## चांगले प्रदर्शन तत्त्वे
### रंग सुरक्षित पॅलेट्स
लोक जग वेगवेगळ्या प्रकारे पाहतात, आणि यामध्ये रंगांचा समावेश होतो. आपल्या साइटसाठी रंग योजना निवडताना, आपण सर्वांसाठी सुलभ असल्याची खात्री केली पाहिजे. [रंग पॅलेट्स तयार करण्यासाठी एक उत्तम साधन म्हणजे Color Safe](http://colorsafe.co/).
लोक जग वेगवेगळ्या प्रकारे पाहतात, आणि यामध्ये रंगांचा समावेश आहे. आपल्या साइटसाठी रंग योजना निवडताना, आपण सर्वांसाठी सुलभ असल्याची खात्री केली पाहिजे. [Color Safe](http://colorsafe.co/) हे रंग पॅलेट्स तयार करण्यासाठी एक उत्तम साधन आहे.
✅ रंग वापरण्यात खूप समस्याग्रस्त असलेली वेबसाइट ओळखा. का?
✅ रंग वापरण्यात खूप समस्या असलेली वेबसाइट ओळखा. का?
### योग्य HTML वापरा
CSS आणि JavaScript सह कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसण्यासाठी बनवणे शक्य आहे. `<span>` वापरून `<button>` तयार केले जाऊ शकते, आणि `<b>` हायपरलिंक बनू शकते. जरी हे शैलीसाठी सोपे मानले जाऊ शकते, तरीही ते स्क्रीन रीडरला काहीही सांगत नाही. पृष्ठावर नियंत्रण तयार करताना योग्य HTML वापरा. जर तुम्हाला हायपरलिंक हवे असेल, तर `<a>` वापरा. योग्य नियंत्रणासाठी योग्य HTML वापरणे म्हणजे सेमॅंटिक HTML चा वापर करणे.
CSS आणि JavaScript च्या मदतीने कोणत्याही घटकाला कोणत्याही प्रकारच्या नियंत्रणासारखे दिसायला लावता येते. `<span>` वापरून `<button>` तयार करता येतो, आणि `<b>` वापरून हायपरलिंक तयार करता येतो. जरी हे स्टाइल करणे सोपे मानले जाऊ शकते, तरीही ते स्क्रीन रीडरला काहीही सांगत नाही. पृष्ठावर नियंत्रण तयार करताना योग्य HTML वापरा. जर तुम्हाला हायपरलिंक हवे असेल, तर `<a>` वापरा. योग्य नियंत्रणासाठी योग्य HTML वापरणे म्हणजे Semantic HTML चा वापर करणे.
✅ कोणत्याही वेबसाइटवर जा आणि डिझायनर्स आणि डेव्हलपर्स HTML योग्य प्रकारे वापरत आहेत का ते पहा. तुम्हाला असे बटण सापडते का जे लिंक असायला हवे? सूचना: उजवे क्लिक करा आणि आपल्या ब्राउझरमध्ये 'View Page Source' निवडा आणि अंतर्निहित कोड पहा.
✅ कोणत्याही वेबसाइटवर जा आणि डिझायनर्स आणि डेव्हलपर्स HTML योग्य प्रकारे वापरत आहेत का ते पहा. तुम्हाला असे बटण सापडते का जे लिंक असायला हवे? संकेत: आपल्या ब्राउझरमध्ये 'View Page Source' निवडण्यासाठी उजवे क्लिक करा आणि अंतर्निहित कोड पहा.
### वर्णनात्मक हेडिंग श्रेणी तयार करा
### वर्णनात्मक शीर्षक श्रेणी तयार करा
स्क्रीन रीडर वापरकर्ते [माहिती शोधण्यासाठी आणि पृष्ठावर नेव्हिगेट करण्यासाठी हेडिंगवर मोठ्या प्रमाणावर अवलंबून असतात](https://webaim.org/projects/screenreadersurvey8/#finding). वर्णनात्मक हेडिंग सामग्री लिहिणे आणि सेमॅंटिक हेडिंग टॅग वापरणे स्क्रीन रीडर वापरकर्त्यांसाठी सहज नेव्हिगेट करण्यायोग्य साइट तयार करण्यासाठी महत्त्वाचे आहे.
स्क्रीन रीडर वापरकर्ते [माहिती शोधण्यासाठी आणि पृष्ठावर नेव्हिगेट करण्यासाठी शीर्षकांवर मोठ्या प्रमाणावर अवलंबून असतात](https://webaim.org/projects/screenreadersurvey8/#finding). वर्णनात्मक शीर्षक सामग्री लिहिणे आणि सेमॅंटिक शीर्षक टॅग वापरणे स्क्रीन रीडर वापरकर्त्यांसाठी सहज नेव्हिगेट करण्यायोग्य साइट तयार करण्यासाठी महत्त्वाचे आहे.
### चांगल्या दृश्य संकेतांचा वापर करा
CSS पृष्ठावरील कोणत्याही घटकाच्या स्वरूपावर पूर्ण नियंत्रण देते. तुम्ही आउटलाइनशिवाय मजकूर बॉक्स तयार करू शकता किंवा अंडरलाइनशिवाय हायपरलिंक्स तयार करू शकता. दुर्दैवाने, त्या संकेत काढून टाकल्याने कोणत्याही प्रकारच्या नियंत्रणाला ओळखण्यासाठी त्यांच्यावर अवलंबून असलेल्या व्यक्तीसाठी ते अधिक आव्हानात्मक होऊ शकते.
CSS पृष्ठावरील कोणत्याही घटकाच्या स्वरूपावर पूर्ण नियंत्रण देते. तुम्ही आउटलाइनशिवाय मजकूर बॉक्स किंवा अंडरलाइनशिवाय हायपरलिंक तयार करू शकता. दुर्दैवाने, हे संकेत काढून टाकल्याने त्यावर अवलंबून असलेल्या व्यक्तीला नियंत्रणाचा प्रकार ओळखणे अधिक आव्हानात्मक होऊ शकते.
## लिंक मजकूराचे महत्त्व
हायपरलिंक्स वेबवर नेव्हिगेट करण्यासाठी मुख्य आहेत. परिणामी, स्क्रीन रीडर योग्य प्रकारे दुवे वाचू शकतो याची खात्री करणे सर्व वापरकर्त्यांना आपल्या साइटवर नेव्हिगेट करण्यास अनुमती देते.
हायपरलिंक्स वेबवर नेव्हिगेट करण्यासाठी मुख्य आहेत. परिणामी, स्क्रीन रीडरने दुवे योग्य प्रकारे वाचू शकणे सुनिश्चित करणे सर्व वापरकर्त्यांना आपल्या साइटवर नेव्हिगेट करण्यास अनुमती देते.
### स्क्रीन रीडर्स आणि दुवे
आपल्याला अपेक्षित असल्याप्रमाणे, स्क्रीन रीडर्स पृष्ठावरील इतर कोणत्याही मजकुराप्रमाणे दुवा मजकूर वाचतात. हे लक्षात घेऊन, खाली प्रदर्शित मजकूर परिपूर्णपणे स्वीकारार्ह वाटू शकतो.
आपल्याला अपेक्षित असल्याप्रमाणे, स्क्रीन रीडर्स पृष्ठावरील इतर मजकुराप्रमाणेच लिंक मजकूर वाचतात. हे लक्षात घेऊन, खाली दर्शविलेला मजकूर पूर्णपणे स्वीकारार्ह वाटू शकतो.
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे. [इथे क्लिक करा](https://en.wikipedia.org/wiki/Little_penguin) अधिक माहितीसाठी.
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे. [Click here](https://en.wikipedia.org/wiki/Little_penguin) अधिक माहितीसाठी.
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे. अधिक माहितीसाठी https://en.wikipedia.org/wiki/Little_penguin ला भेट द्या.
> लहान पेंग्विन, ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे. अधिक माहितीसाठी https://en.wikipedia.org/wiki/Little_penguin ला भेट द्या.
> **NOTE** तुम्ही वाचणार आहात, तुम्ही **कधीही** वर दिलेल्या प्रकारचे दुवे तयार करू नयेत.
@ -105,23 +105,23 @@ CSS पृष्ठावरील कोणत्याही घटकाच
### URL वापरण्याची समस्या
स्क्रीन रीडर्स मजकूर वाचतात. जर मजकुरात URL दिसला, तर स्क्रीन रीडर URL वाचेल. सामान्यतः, URL अर्थपूर्ण माहिती देत नाही आणि त्रासदायक वाटू शकतो. जर तुमच्या फोनने कधीही URL असलेला मजकूर संदेश मोठ्याने वाचला असेल तर तुम्ही हे अनुभवले असेल.
स्क्रीन रीडर्स मजकूर वाचतात. जर मजकुरात URL दिसला, तर स्क्रीन रीडर URL वाचेल. सामान्यतः, URL अर्थपूर्ण माहिती देत नाही आणि त्रासदायक वाटू शकतो. जर तुमच्या फोनने कधीही URL असलेला मजकूर संदेश मोठ्याने वाचला असेल, तर तुम्ही हे अनुभवले असेल.
### "इथे क्लिक करा" वापरण्याची समस्या
### "Click here" वापरण्याची समस्या
स्क्रीन रीडर्स पृष्ठावरील फक्त हायपरलिंक्स वाचण्याची क्षमता देखील असते, जसे की दृष्टिसंपन्न व्यक्ती दुवे शोधण्यासाठी पृष्ठ स्कॅन करेल. जर दुवा मजकूर नेहमी "इथे क्लिक करा" असेल, तर वापरकर्त्याला "इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, इथे क्लिक करा, ..." असे ऐकू येईल. सर्व दुवे आता एकमेकांपासून वेगळे करता येत नाहीत.
स्क्रीन रीडर्स पृष्ठावरील फक्त हायपरलिंक्स वाचण्याची क्षमता देखील ठेवतात, जसे की दृष्टिसंपन्न व्यक्ती पृष्ठावरील दुवे स्कॅन करेल. जर लिंक मजकूर नेहमी "Click here" असेल, तर वापरकर्त्याला "Click here, Click here, Click here, Click here, Click here, ..." असे ऐकू येईल. सर्व दुवे आता एकमेकांपासून वेगळे ओळखता येत नाहीत.
### चांगला दुवा मजकूर
### चांगला लिंक मजकूर
चांगला दुवा मजकूर दुव्याच्या दुसऱ्या बाजूला काय आहे याचे थोडक्यात वर्णन करतो. लहान पेंग्विनबद्दल बोलणाऱ्या वरील उदाहरणात, दुवा प्रजातीबद्दल विकिपीडिया पृष्ठावर आहे. *लहान पेंग्विन* ही वाक्ये परिपूर्ण दुवा मजकूर बनवेल कारण ते स्पष्ट करते की कोणीतरी दुवा क्लिक केल्यास त्यांना काय शिकायला मिळेल - लहान पेंग्विन.
चांगला लिंक मजकूर दुव्याच्या दुसऱ्या बाजूला काय आहे याचे थोडक्यात वर्णन करतो. वरच्या उदाहरणात लहान पेंग्विनबद्दल बोलताना, दुवा प्रजातीबद्दल Wikipedia पृष्ठावर आहे. *लहान पेंग्विन* ही वाक्ये परिपूर्ण लिंक मजकूर बनवतील कारण ते स्पष्ट करते की एखाद्याला दुवा क्लिक केल्यास काय शिकायला मिळेल - लहान पेंग्विन.
> [लहान पेंग्विन](https://en.wikipedia.org/wiki/Little_penguin), ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, हा जगातील सर्वात लहान पेंग्विन आहे.
> [लहान पेंग्विन](https://en.wikipedia.org/wiki/Little_penguin), ज्याला कधी कधी परी पेंग्विन म्हणून ओळखले जाते, जगातील सर्वात लहान पेंग्विन आहे.
✅ काही मिनिटे वेबवर सर्फ करा आणि अस्पष्ट लिंकिंग रणनीती वापरणाऱ्या पृष्ठांचा शोध घ्या. त्यांची इतर, चांगल्या प्रकारे लिंक केलेल्या साइट्सशी तुलना करा. तुम्हाला काय शिकायला मिळते?
✅ काही मिनिटांसाठी वेबवर सर्फ करा आणि अस्पष्ट लिंकिंग रणनीती वापरणाऱ्या पृष्ठांचा शोध घ्या. त्यांची इतर, चांगल्या प्रकारे लिंक केलेल्या साइट्सशी तुलना करा. तुम्हाला काय शिकायला मिळते?
#### शोध इंजिन नोट्स
आपल्या साइटवर सर्वांसाठी सुलभता सुनिश्चित करण्याचा अतिरिक्त बोनस म्हणून, आपण शोध इंजिनला आपल्या साइटवर नेव्हिगेट करण्यात मदत कराल. शोध इंजिन पृष्ठांच्या विषयांबद्दल शिकण्यासाठी दुवा मजकूर वापरतात. त्यामुळे चांगला दुवा मजकूर वापरणे सर्वांना मदत करते!
आपल्या साइटला सर्वांसाठी सुलभ बनवण्याचे अतिरिक्त फायदे म्हणून, आपण शोध इंजिनला आपल्या साइटवर नेव्हिगेट करण्यात मदत कराल. शोध इंजिन पृष्ठांच्या विषयांबद्दल शिकण्यासाठी लिंक मजकूर वापरतात. त्यामुळे चांगला लिंक मजकूर वापरणे सर्वांना मदत करते!
| Super widget | [Description](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../1-getting-started-lessons/3-accessibility/') |
या उदाहरणात, वर्णन आणि ऑर्डर मजकूर पुनरावृत्ती करणे ब्राउझर वापरणाऱ्या व्यक्तीसाठी अर्थपूर्ण आहे. तथापि, स्क्रीन रीडर वापरणाऱ्या व्यक्तीला *वर्णन* आणि *ऑर्डर* शब्द केवळ संदर्भाशिवाय ऐकू येतील.
@ -138,13 +138,13 @@ CSS पृष्ठावरील कोणत्याही घटकाच
> **NOTE**: HTML च्या अनेक पैलूंप्रमाणे, ब्राउझर आणि स्क्रीन रीडर समर्थन वेगवेगळे असू शकते. तथापि, बहुतेक मुख्य प्रवाहातील क्लायंट ARIA गुणधर्मांना समर्थन देतात.
आपण `aria-label` वापरून दुव्याचे वर्णन करू शकता जेव्हा पृष्ठाचे स्वरूप आपल्याला ते करण्याची परवानगी देत नाही. Widget साठी वर्णन सेट केले जाऊ शकते
आपण `aria-label` वापरून दुव्याचे वर्णन करू शकता जेव्हा पृष्ठाचे स्वरूप आपल्याला ते करण्यास अनुमती देत नाही. Widget साठी वर्णन सेट केले जाऊ शकते:
✅ सामान्यतः, वरील वर्णन केल्याप्रमाणे सेमॅंटिक मार्कअपचा वापर ARIA च्या वापरावर प्राधान्य देतो, परंतु कधीकधी विविध HTML विजेट्ससाठी सेमॅंटिक समकक्ष नसतो. चांगले उदाहरण म्हणजे ट्री. ट्रीसाठी HTML समकक्ष नाही, त्यामुळे आपण या घटकासाठी सामान्य `<div>` योग्य भूमिका आणि ARIA मूल्यांसह ओळखता. [MDN च्या ARIA दस्तऐवजीकरण](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) मध्ये अधिक उपयुक्त माहिती आहे.
✅ सामान्यतः, वर वर्णन केल्याप्रमाणे सेमॅंटिक मार्कअपचा वापर ARIA च्या वापरावर प्राधान्य देतो, परंतु कधीकधी विविध HTML विजेट्ससाठी सेमॅंटिक समकक्ष नसतो. चांगले उदाहरण म्हणजे Tree. Tree साठी HTML समकक्ष नाही, त्यामुळे आपण या घटकासाठी सामान्य `<div>` योग्य भूमिका आणि ARIA मूल्यांसह ओळखता. [MDN च्या ARIA दस्तऐवज](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) मध्ये अधिक उपयुक्त माहिती आहे.
```html
<h2id="tree-label">File Viewer</h2>
@ -155,14 +155,14 @@ CSS पृष्ठावरील कोणत्याही घटकाच
## प्रतिमा
हे सांगणे आवश्यक नाही की स्क्रीन रीडर्स प्रतिमेमध्ये काय आहे ते आपोआप वाचू शकत नाहीत. प्रतिमा सुलभ आहेत याची खात्री करणे फारसे काम करत नाही - हे `alt` गुणधर्माबद्दल आहे. सर्व अर्थपूर्ण प्रतिमांमध्ये त्या काय आहेत याचे वर्णन करण्यासाठी `alt` असावे.
शुद्ध सजावटीच्या प्रतिमांसाठी त्यांचे `alt` गुणधर्म रिक्त स्ट्रिंगवर सेट केले पाहिजे: `alt=""`. हे स्क्रीन रीडर्सना सजावटीच्या प्रतिमेची अनावश्यक घोषणा करण्यापासून प्रतिबंधित करते.
हे सांगणे आवश्यक नाही की स्क्रीन रीडर्स प्रतिमेमध्ये काय आहे ते आपोआप वाचू शकत नाहीत. प्रतिमा सुलभ असल्याची खात्री करणे फारसे काम घेते नाही - `alt` गुणधर्म यासाठी आहे. सर्व अर्थपूर्ण प्रतिमांमध्ये त्या काय आहेत याचे वर्णन करण्यासाठी `alt` असावे.
पूर्णपणे सजावटीच्या प्रतिमांचे `alt` गुणधर्म रिक्त स्ट्रिंगवर सेट केले पाहिजे: `alt=""`. यामुळे स्क्रीन रीडर्स सजावटीच्या प्रतिमेची अनावश्यक घोषणा करण्यापासून प्रतिबंधित करतात.
✅ तुम्हाला अपेक्षित असल्याप्रमाणे, शोध इंजिन देखील प्रतिमेमध्ये काय आहे ते समजून घेऊ शकत नाहीत. ते देखील alt मजकूर वापरतात. त्यामुळे पुन्हा एकदा, आपले पृष्ठ सुलभ असल्याची खात्री करणे अतिरिक्त बोनस प्रदान करते!
✅ तुम्हाला अपेक्षित असल्याप्रमाणे, शोध इंजिन प्रतिमेमध्ये काय आहे ते समजू शकत नाहीत. ते देखील alt मजकूर वापरतात. त्यामुळे पुन्हा एकदा, आपले पृष्ठ सुलभ असल्याची खात्री करणे अतिरिक्त फायदे प्रदान करते!
## कीबोर्ड
काही वापरकर्ते माऊस किंवा ट्रॅकपॅड वापरण्यास असमर्थ असतात, त्याऐवजी कीबोर्ड संवादांवर अवलंबून असतात जे एका घटकावरून पुढील घटकावर टॅब करतात. कीबोर्ड वापरकर्ता दस्तऐवज खाली जात असताना प्रत्येक परस्पर घटकावर प्रवेश करू शकेल अशा प्रकारे आपल्या वेबसाइटने आपली
काही वापरकर्ते माऊस किंवा ट्रॅकपॅड वापरण्यास असमर्थ असतात, त्याऐवजी कीबोर्ड संवादांवर अवलंबून असतात जे एका घटकावरून पुढील घटकावर टॅब करतात. आपल्या वेबसाइटने आपली सामग्री तार्किक क्रमाने सादर करणे महत्त्वाचे आहे जेणेकरून कीबोर्ड वापरकर्ता प्रत्येक परस्पर घटकावर प्रवेश करू शकेल. जर तुम्ही सेमॅंटिक मार्कअपसह तुमची वेब पृष्ठे तयार केली आणि त्यांच्या दृश्य लेआउटला शैली देण्यासाठी CSS वापरला, तर तुमची साइट कीबोर्ड-नेव्हिगेट करण्यायोग्य असावी, परंतु या पैलूची मॅन्युअली चाच
अनेक सरकारांकडे प्रवेशयोग्यता आवश्यकता संबंधित कायदे आहेत. आपल्या देशातील प्रवेशयोग्यता कायद्यांबद्दल वाचा. काय समाविष्ट आहे आणि काय नाही? याचे एक उदाहरण म्हणजे [हा सरकारी वेब साइट](https://accessibility.blog.gov.uk/).
## असाइनमेंट
@ -174,4 +174,4 @@ CSS पृष्ठावरील कोणत्याही घटकाच
---
**अस्वीकरण**:
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण होणाऱ्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा
## प्रि-लेक्चर क्विज
@ -19,7 +19,7 @@ CO_OP_TRANSLATOR_METADATA:
>
> \- सर टिमोथी बर्नर्स-ली, W3C निर्देशक र वर्ल्ड वाइड वेबका आविष्कारक
यो उद्धरणले पहुँचयोग्य वेबसाइटहरू बनाउने महत्त्वलाई पूर्ण रूपमा उजागर गर्छ। एउटा एप्लिकेसन जुन सबैले पहुँच गर्न सक्दैन भने त्यो स्वाभाविक रूपमा बहिष्करणात्मक हुन्छ। वेब विकासकर्ताको रूपमा हामीले सधैं पहुँचयोग्यता ध्यानमा राख्नुपर्छ। सुरुबाटै यसमा ध्यान दिएर तपाईंले सबैले तपाईंले बनाएको पृष्ठहरू पहुँच गर्न सक्ने सुनिश्चित गर्न सक्नुहुन्छ। यस पाठमा, तपाईंले पहुँचयोग्यता सुनिश्चित गर्न मद्दत गर्ने उपकरणहरू र पहुँचयोग्यता ध्यानमा राखेर निर्माण गर्ने तरिकाहरू सिक्नुहुनेछ।
यो उद्धरणले पहुँचयोग्य वेबसाइटहरू बनाउने महत्त्वलाई पूर्ण रूपमा उजागर गर्छ। एउटा एप्लिकेसन जुन सबैले पहुँच गर्न सक्दैन भने त्यो स्वाभाविक रूपमा बहिष्करणात्मक हुन्छ। वेब विकासकर्ताको रूपमा हामीले सधैं पहुँचयोग्यता ध्यानमा राख्नुपर्छ। सुरुदेखि नै यसमा ध्यान दिएर तपाईंले सबैले तपाईंले बनाएको पृष्ठहरू पहुँच गर्न सक्ने सुनिश्चित गर्न सक्नुहुन्छ। यस पाठमा, तपाईंले वेब सम्पत्तिहरू पहुँचयोग्य बनाउन मद्दत गर्ने उपकरणहरू र पहुँचयोग्यता ध्यानमा राखेर निर्माण गर्ने तरिकाहरू सिक्नुहुनेछ।
> तपाईं यो पाठ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) मा लिन सक्नुहुन्छ!
@ -29,41 +29,41 @@ CO_OP_TRANSLATOR_METADATA:
सबैभन्दा प्रख्यात पहुँचयोग्यता उपकरणहरू मध्ये एक स्क्रिन रिडरहरू हुन्।
[स्क्रिन रिडरहरू](https://en.wikipedia.org/wiki/Screen_reader) दृष्टि अपाङ्गता भएका व्यक्तिहरूका लागि सामान्यत: प्रयोग गरिने क्लाइन्टहरू हुन्। हामीले ब्राउजरले हामीले साझा गर्न चाहेको जानकारी सही रूपमा व्यक्त गर्न सुनिश्चित गर्न समय खर्च गर्छौं भने स्क्रिन रिडरले पनि त्यही गर्न सक्ने सुनिश्चित गर्नुपर्छ।
[स्क्रिन रिडरहरू](https://en.wikipedia.org/wiki/Screen_reader) दृष्टि समस्या भएका व्यक्तिहरूले प्राय: प्रयोग गर्ने क्लाइन्टहरू हुन्। हामीले ब्राउजरले हामीले साझा गर्न चाहेको जानकारी सही रूपमा व्यक्त गर्न सुनिश्चित गर्ने समय खर्च गरेजस्तै, स्क्रिन रिडरले पनि त्यही गर्न सक्ने सुनिश्चित गर्नुपर्छ।
स्क्रिन रिडरले आधारभूत रूपमा पृष्ठलाई माथिबाट तलसम्म श्रव्य रूपमा पढ्छ। यदि तपाईंको पृष्ठ सबै पाठ हो भने, रिडरले ब्राउजरजस्तै जानकारी व्यक्त गर्नेछ। तर, वेब पृष्ठहरू प्राय: शुद्ध पाठ मात्र हुँदैनन्; तिनीहरूमा लिंकहरू, ग्राफिक्स, रंग, र अन्य दृश्य घटकहरू हुन्छन्। स्क्रिन रिडरले यो जानकारी सही रूपमा पढ्न सक्ने सुनिश्चित गर्न ध्यान दिनुपर्छ।
स्क्रिन रिडरले आधारभूत रूपमा पृष्ठलाई माथिदेखि तलसम्म श्रव्य रूपमा पढ्छ। यदि तपाईंको पृष्ठ पूर्ण रूपमा पाठ हो भने, रिडरले ब्राउजरजस्तै जानकारी व्यक्त गर्नेछ। तर, वेब पृष्ठहरू प्राय: शुद्ध पाठ मात्र हुँदैनन्; तिनीहरूमा लिंकहरू, ग्राफिक्स, रंगहरू, र अन्य दृश्य घटकहरू हुन्छन्। स्क्रिन रिडरले यो जानकारी सही रूपमा पढ्न सक्ने सुनिश्चित गर्न ध्यान दिनुपर्छ।
प्रत्येक वेब विकासकर्ताले स्क्रिन रिडरसँग परिचित हुनुपर्छ। माथि उल्लेख गरेझैं, यो तपाईंका प्रयोगकर्ताहरूले प्रयोग गर्ने क्लाइन्ट हो। तपाईं ब्राउजर कसरी काम गर्छ भनेर जान्नुभएको जस्तै, तपाईंले स्क्रिन रिडर कसरी काम गर्छ भनेर जान्नुपर्छ। भाग्यवश, अधिकांश अपरेटिङ सिस्टमहरूमा स्क्रिन रिडरहरू समावेश छन्।
प्रत्येक वेब विकासकर्ताले स्क्रिन रिडरसँग परिचित हुनुपर्छ। माथि उल्लेख गरेजस्तै, यो तपाईंका प्रयोगकर्ताहरूले प्रयोग गर्ने क्लाइन्ट हो। तपाईं ब्राउजर कसरी काम गर्छ भनेर जान्नुभएको जस्तै, तपाईंले स्क्रिन रिडर कसरी काम गर्छ भनेर पनि जान्नुपर्छ। भाग्यवश, अधिकांश अपरेटिङ सिस्टमहरूमा स्क्रिन रिडरहरू समावेश छन्।
केही ब्राउजरहरूमा पनि पाठलाई श्रव्य रूपमा पढ्ने वा केही आधारभूत नेभिगेसन सुविधाहरू प्रदान गर्ने बिल्ट-इन उपकरणहरू र एक्सटेन्सनहरू हुन्छन्, जस्तै [Edge ब्राउजरका यी पहुँचयोग्यता-केंद्रित उपकरणहरू](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। यी पनि महत्त्वपूर्ण पहुँचयोग्यता उपकरणहरू हुन्, तर स्क्रिन रिडर परीक्षण उपकरणहरूका रूपमा भ्रमित हुनु हुँदैन।
केही ब्राउजरहरूमा पनि पाठलाई श्रव्य रूपमा पढ्ने वा केही आधारभूत नेभिगेसन सुविधाहरू प्रदान गर्ने बिल्ट-इन उपकरणहरू र एक्सटेन्सनहरू हुन्छन्, जस्तै [यी पहुँचयोग्यता-केंद्रित Edge ब्राउजर उपकरणहरू](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। यी पनि महत्त्वपूर्ण पहुँचयोग्यता उपकरणहरू हुन्, तर स्क्रिन रिडर परीक्षण उपकरणहरूसँग भ्रमित हुनु हुँदैन।
✅ स्क्रिन रिडर र ब्राउजर टेक्स्ट रिडर प्रयास गर्नुहोस्। Windows मा [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) डिफल्ट रूपमा समावेश छ, र [JAWS](https://webaim.org/articles/jaws/) र [NVDA](https://www.nvaccess.org/about-nvda/) पनि स्थापना गर्न सकिन्छ। macOS र iOS मा [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफल्ट रूपमा समावेश छ।
### जूम
दृष्टि अपाङ्गता भएका व्यक्तिहरूले सामान्यत: प्रयोग गर्ने अर्को उपकरण जूम हो। जूमको सबैभन्दा आधारभूत प्रकार स्थिर जूम हो, जुन `Control + plus sign (+)` मार्फत वा स्क्रिन रिजोल्युसन घटाएर नियन्त्रण गरिन्छ। यो प्रकारको जूमले सम्पूर्ण पृष्ठलाई पुन: आकार दिन्छ, त्यसैले [उत्तरदायी डिजाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) प्रयोग गरेर उच्च जूम स्तरहरूमा राम्रो प्रयोगकर्ता अनुभव प्रदान गर्न महत्त्वपूर्ण छ।
दृष्टि समस्या भएका व्यक्तिहरूले प्राय: प्रयोग गर्ने अर्को उपकरण जूम हो। जूमको सबैभन्दा आधारभूत प्रकार स्थिर जूम हो, जुन `Control + प्लस चिन्ह (+)` मार्फत वा स्क्रिन रिजोल्युसन घटाएर नियन्त्रण गरिन्छ। यो प्रकारको जूमले सम्पूर्ण पृष्ठलाई पुन: आकार दिन्छ, त्यसैले [उत्तरदायी डिजाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) प्रयोग गरेर उच्च जूम स्तरहरूमा राम्रो प्रयोगकर्ता अनुभव प्रदान गर्न महत्त्वपूर्ण छ।
जूमको अर्को प्रकार विशेष सफ्टवेयरमा निर्भर गर्दछ जसले स्क्रिनको एक क्षेत्रलाई ठूलो बनाउँछ र प्यान गर्दछ, वास्तविक आवर्धक गिलास प्रयोग गरेजस्तै। Windows मा [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/) नामक बिल्ट-इन आवर्धन सफ्टवेयर छ।
जूमको अर्को प्रकार विशेष सफ्टवेयरमा निर्भर गर्दछ जसले स्क्रिनको एक क्षेत्रलाई ठूलो बनाउँछ र प्यान गर्दछ, वास्तविक आवर्धक गिलास प्रयोग गरेजस्तै। Windows मा, [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 को रंग चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) प्रयोग गरेर रंगको प्रयोगको लागि परीक्षण गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
✅ तपाईंले मन पराउने वेबसाइटलाई ब्राउजर एक्सटेन्सन जस्तै [WCAG को रंग चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) प्रयोग गरेर रंगको प्रयोगको लागि परीक्षण गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
### Lighthouse
तपाईंको ब्राउजरको डेभलपर टूल क्षेत्रमा, तपाईंले Lighthouse उपकरण पाउनुहुनेछ। यो उपकरण वेबसाइटको पहुँचयोग्यता (साथै अन्य विश्लेषण) को पहिलो दृष्टिकोण प्राप्त गर्न महत्त्वपूर्ण छ। जबकि Lighthouse मा मात्र निर्भर गर्नु हुँदैन, १००% स्कोर आधार रेखाको रूपमा धेरै उपयोगी हुन्छ।
तपाईंको ब्राउजरको डेभलपर टूल क्षेत्रमा, तपाईंले Lighthouse उपकरण पाउनुहुनेछ। यो उपकरण वेबसाइटको पहुँचयोग्यता (साथै अन्य विश्लेषण) को पहिलो दृष्टिकोण प्राप्त गर्न महत्त्वपूर्ण छ। जबकि Lighthouse मा मात्र निर्भर गर्नु हुँदैन, १००% स्कोर आधारभूत रूपमा धेरै उपयोगी छ।
✅ तपाईंको ब्राउजरको डेभलपर टूल प्यानलमा Lighthouse खोज्नुहोस् र कुनै पनि साइटमा विश्लेषण चलाउनुहोस्। तपाईंले के पत्ता लगाउनुहुन्छ?
## पहुँचयोग्यताका लागि डिजाइन गर्ने
## पहुँचयोग्यता डिजाइन गर्ने
पहुँचयोग्यता एक अपेक्षाकृत ठूलो विषय हो। तपाईंलाई सहयोग गर्नका लागि, धेरै स्रोतहरू उपलब्ध छन्।
पहुँचयोग्यता एक अपेक्षाकृत ठूलो विषय हो। तपाईंलाई सहयोग गर्न, धेरै स्रोतहरू उपलब्ध छन्।
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
हामी पहुँचयोग्य साइटहरू बनाउने प्रत्येक पक्षलाई कभर गर्न सक्दैनौं, तर तल केही मुख्य सिद्धान्तहरू छन् जुन तपाईंले कार्यान्वयन गर्न चाहनुहुन्छ। सुरुबाट पहुँचयोग्य पृष्ठ डिजाइन गर्नु **सधैं** सजिलो हुन्छ भन्दा पहिलेको पृष्ठलाई पहुँचयोग्य बनाउन।
हामी पहुँचयोग्य साइटहरू बनाउने प्रत्येक पक्षलाई समेट्न सक्दैनौं, तर तल केही मुख्य सिद्धान्तहरू छन् जुन तपाईंले कार्यान्वयन गर्न चाहनुहुन्छ। सुरुबाट पहुँचयोग्य पृष्ठ डिजाइन गर्नु **सधैं** पहुँचयोग्य बनाउनको लागि पहिले नै बनेको पृष्ठमा फर्कनु भन्दा सजिलो हुन्छ।
## राम्रो प्रदर्शन सिद्धान्तहरू
@ -75,17 +75,17 @@ CO_OP_TRANSLATOR_METADATA:
### सही HTML प्रयोग गर्नुहोस्
CSS र JavaScript प्रयोग गरेर कुनै पनि तत्वलाई कुनै पनि प्रकारको नियन्त्रण जस्तो देखाउन सम्भव छ। `<span>` लाई `<button>` बनाउन सकिन्छ, र `<b>` लाई हाइपरलिंक बनाउन सकिन्छ। जबकि यो शैली गर्न सजिलो मान्न सकिन्छ, यो स्क्रिन रिडरलाई केही व्यक्त गर्दैन। पृष्ठमा नियन्त्रणहरू बनाउँदा उपयुक्त HTML प्रयोग गर्नुहोस्। यदि तपाईंलाई हाइपरलिंक चाहिन्छ भने, `<a>` प्रयोग गर्नुहोस्। सही HTML सही नियन्त्रणको लागि प्रयोग गर्नुलाई Semantic HTML प्रयोग गर्नु भनिन्छ।
CSS र JavaScript प्रयोग गरेर कुनै पनि तत्वलाई कुनै पनि प्रकारको नियन्त्रण जस्तो देखाउन सम्भव छ। `<span>` लाई `<button>` बनाउन सकिन्छ, र `<b>` लाई हाइपरलिंक बनाउन सकिन्छ। जबकि यो शैली गर्न सजिलो मान्न सकिन्छ, यो स्क्रिन रिडरलाई केही पनि व्यक्त गर्दैन। पृष्ठमा नियन्त्रणहरू बनाउँदा उपयुक्त HTML प्रयोग गर्नुहोस्। यदि तपाईंलाई हाइपरलिंक चाहिन्छ भने, `<a>` प्रयोग गर्नुहोस्। सही HTML सही नियन्त्रणको लागि प्रयोग गर्नुलाई Semantic HTML प्रयोग गर्नु भनिन्छ।
✅ कुनै पनि वेबसाइटमा जानुहोस् र डिजाइनरहरू र विकासकर्ताहरूले HTML सही रूपमा प्रयोग गरिरहेका छन् कि छैनन् हेर्नुहोस्। तपाईंले लिंक हुनुपर्ने बटन पाउन सक्नुहुन्छ? संकेत: तपाईंको ब्राउजरमा 'View Page Source' चयन गर्न र अन्तर्निहित कोड हेर्न दायाँ क्लिक गर्नुहोस्।
### वर्णनात्मक हेडिङ पदानुक्रम सिर्जना गर्नुहोस्
स्क्रिन रिडर प्रयोगकर्ताहरू [हेडिङहरूमा धेरै निर्भर गर्छन्](https://webaim.org/projects/screenreadersurvey8/#finding) जानकारी पाउन र पृष्ठमा नेभिगेट गर्न। वर्णनात्मक हेडिङ सामग्री लेख्नु र सेम्यान्टिक हेडिङ ट्यागहरू प्रयोग गर्नु स्क्रिन रिडर प्रयोगकर्ताहरूका लागि सजिलो नेभिगेट गर्न सकिने साइट सिर्जना गर्न महत्त्वपूर्ण छ।
स्क्रिन रिडर प्रयोगकर्ताहरू [हेडिङहरूमा धेरै निर्भर](https://webaim.org/projects/screenreadersurvey8/#finding) हुन्छन् जानकारी पाउन र पृष्ठमा नेभिगेट गर्न। वर्णनात्मक हेडिङ सामग्री लेख्नु र सेम्यान्टिक हेडिङ ट्यागहरू प्रयोग गर्नु स्क्रिन रिडर प्रयोगकर्ताहरूका लागि सजिलो नेभिगेट गर्न सकिने साइट सिर्जना गर्न महत्त्वपूर्ण छ।
### राम्रो दृश्य संकेतहरू प्रयोग गर्नुहोस्
CSS ले पृष्ठमा कुनै पनि तत्वको रूपमाथि पूर्ण नियन्त्रण प्रदान गर्दछ। तपाईंले आउटलाइन बिना पाठ बक्सहरू वा अन्डरलाइन बिना हाइपरलिंकहरू सिर्जना गर्न सक्नुहुन्छ। दुर्भाग्यवश, ती संकेतहरू हटाउँदा तिनीहरूमा निर्भर गर्ने व्यक्तिले नियन्त्रणको प्रकारलाई चिन्हित गर्न गाह्रो हुन सक्छ।
CSS ले पृष्ठमा कुनै पनि तत्वको रूपमाथि पूर्ण नियन्त्रण प्रदान गर्दछ। तपाईंले आउटलाइन बिना पाठ बक्सहरू वा अन्डरलाइन बिना हाइपरलिंकहरू सिर्जना गर्न सक्नुहुन्छ। दुर्भाग्यवश, ती संकेतहरू हटाउँदा तिनीहरूमा निर्भर गर्ने व्यक्तिले नियन्त्रणको प्रकारलाई पहिचान गर्न गाह्रो बनाउन सक्छ।
## लिंक पाठको महत्त्व
@ -93,29 +93,29 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
### स्क्रिन रिडरहरू र लिंकहरू
जसरी तपाईंले अपेक्षा गर्नुहुन्छ, स्क्रिन रिडरहरूले लिंक पाठलाई पृष्ठमा अन्य पाठ जस्तै पढ्छ। यसलाई ध्यानमा राख्दै, तल देखाइएको पाठ स्वीकार्य लाग्न सक्छ।
जसरी तपाईंले अपेक्षा गर्नुहुन्छ, स्क्रिन रिडरहरूले पृष्ठमा अन्य पाठ जस्तै लिंक पाठ पढ्छन्। यसलाई ध्यानमा राख्दै, तल देखाइएको पाठ स्वीकार्य लाग्न सक्छ।
> सानो पेंगुइन, कहिलेकाहीं परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो। [यहाँ क्लिक गर्नुहोस्](https://en.wikipedia.org/wiki/Little_penguin) थप जानकारीको लागि।
> सानो पेंगुइन, कहिलेकाहीं परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो। थप जानकारीको लागि https://en.wikipedia.org/wiki/Little_penguin भ्रमण गर्नुहोस्।
> **NOTE** तपाईं पढ्न लाग्नुभएको छ, तपाईंले **कहिल्यै** माथिको जस्तो देखिने लिंकहरू सिर्जना गर्नु हुँदैन।
> **NOTE** तपाईं पढ्न लाग्नुभएको छ, तपाईंले **कहिल्यै पनि** माथिको जस्तो लिंकहरू सिर्जना गर्नु हुँदैन।
### URL प्रयोगको समस्या
स्क्रिन रिडरहरूले पाठ पढ्छ। यदि पाठमा URL देखा पर्दछ भने, स्क्रिन रिडरले URL पढ्छ। सामान्यत: URL ले अर्थपूर्ण जानकारी व्यक्त गर्दैन, र यो झर्को लाग्न सक्छ। तपाईंले यो अनुभव गर्नुभएको हुन सक्छ यदि तपाईंको फोनले कहिल्यै URL भएको टेक्स्ट सन्देश श्रव्य रूपमा पढेको छ भने।
स्क्रिन रिडरहरूले पाठ पढ्छन्। यदि पाठमा URL देखा पर्दछ भने, स्क्रिन रिडरले URL पढ्छ। सामान्यतया, URL ले अर्थपूर्ण जानकारी व्यक्त गर्दैन, र कष्टप्रद सुनिन सक्छ। तपाईंले यो अनुभव गर्नुभएको हुन सक्छ यदि तपाईंको फोनले कहिल्यै URL भएको पाठ सन्देश श्रव्य रूपमा पढेको छ भने।
### "यहाँ क्लिक गर्नुहोस्" को समस्या
स्क्रिन रिडरहरूले पृष्ठमा मात्र हाइपरलिंकहरू पढ्ने क्षमता पनि राख्छन्, जसरी दृष्टि भएका व्यक्तिले पृष्ठमा लिंकहरू स्क्यान गर्थे। यदि लिंक पाठ सधैं "यहाँ क्लिक गर्नुहोस्" छ भने, प्रयोगकर्ताले "यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, ..." मात्र सुन्छ। सबै लिंकहरू अब एकअर्काबाट छुट्याउन असम्भव हुन्छन्।
स्क्रिन रिडरहरूले पृष्ठमा मात्र हाइपरलिंकहरू पढ्ने क्षमता पनि राख्छन्, जसरी दृष्टि भएका व्यक्तिले लिंकहरूका लागि पृष्ठ स्क्यान गर्ने गर्थे। यदि लिंक पाठ सधैं "यहाँ क्लिक गर्नुहोस्" हो भने, प्रयोगकर्ताले "यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, यहाँ क्लिक गर्नुहोस्, ..." मात्र सुन्छ। सबै लिंकहरू अब एकअर्काबाट छुट्याउन असम्भव हुन्छन्।
### राम्रो लिंक पाठ
राम्रो लिंक पाठले लिंकको अर्को छेउमा के छ भनेर संक्षेपमा वर्णन गर्दछ। माथिको उदाहरणमा सानो पेंगुइनको बारेमा कुरा गर्दा, लिंक प्रजातिको Wikipedia पृष्ठमा छ। *साना पेंगुइनहरू* वाक्यांशले लिंक पाठको रूपमा उत्तम काम गर्नेछ किनभने यसले स्पष्ट पार्छ कि कसैले लिंक क्लिक गरेपछि के सिक्नेछ - साना पेंगुइनहरू।
राम्रो लिंक पाठले लिंकको अर्को पक्षमा के छ भनेर संक्षेपमा वर्णन गर्दछ। माथिको उदाहरणमा सानो पेंगुइनहरूको बारेमा कुरा गर्दा, लिंक प्रजातिको Wikipedia पृष्ठमा छ। *साना पेंगुइनहरू* वाक्यांशले लिंक पाठको रूपमा उत्तम काम गर्नेछ किनभने यसले स्पष्ट पार्छ कि कसैले लिंक क्लिक गरेपछि के सिक्नेछ - साना पेंगुइनहरू।
> [साना पेंगुइनहरू](https://en.wikipedia.org/wiki/Little_penguin), कहिलेकाहीं परी पेंगुइन भनेर चिनिन्छ, संसारको सबैभन्दा सानो पेंगुइन हो।
✅ केही मिनेट वेबमा सर्फ गर्नुहोस् र अस्पष्ट लिंकिङ रणनीतिहरू प्रयोग गर्ने पृष्ठहरू खोज्नुहोस्। तिनीहरूलाई अन्य, राम्रो लिंक गरिएको साइटहरूसँग तुलना गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
✅ केही मिनेट वेब ब्राउज गर्नुहोस् र अस्पष्ट लिंकिङ रणनीतिहरू प्रयोग गर्ने पृष्ठहरू खोज्नुहोस्। तिनीहरूलाई अन्य, राम्रो लिंक गरिएको साइटहरूसँग तुलना गर्नुहोस्। तपाईंले के सिक्नुहुन्छ?
#### सर्च इन्जिन नोटहरू
@ -123,16 +123,16 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
यस उदाहरणमा, विवरण र अर्डरको पाठ दोहोर्याउनु ब्राउजर प्रयोग गर्ने व्यक्तिका लागि अर्थपूर्ण हुन्छ। तर, स्क्रिन रिडर प्रयोग गर्ने व्यक्तिले मात्र *विवरण* र *अर्डर* शब्दहरू सुन्छन्, बिना सन्दर्भ।
यस उदाहरणमा, विवरण र अर्डरको पाठ दोहोर्याउनु ब्राउजर प्रयोग गर्ने व्यक्तिका लागि अर्थपूर्ण छ। तर, स्क्रिन रिडर प्रयोग गर्ने व्यक्तिले मात्र *विवरण* र *अर्डर* शब्दहरू सुन्छन्, बिना सन्दर्भ।
यस प्रकारका परिदृश्यहरूलाई समर्थन गर्न, HTML ले [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषता सेटलाई समर्थन गर्दछ। यी विशेषताहरूले स्क्रिन रिडरहरूलाई थप जानकारी प्रदान गर्न अनुमति दिन्छ।
यी प्रकारका परिदृश्यहरूलाई समर्थन गर्न, HTML ले [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषता सेटलाई समर्थन गर्दछ। यी विशेषताहरूले स्क्रिन रिडरहरूलाई थप जानकारी प्रदान गर्न अनुमति दिन्छ।
> **NOTE**: HTML का धेरै पक्षहरू जस्तै, ब्राउजर र स्क्रिन रिडर समर्थन फरक हुन सक्छ। तर, अधिकांश मुख्यलाइन क्लाइन्टहरूले ARIA विशेषताहरूलाई समर्थन गर्छन्।
@ -142,7 +142,7 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
✅ सामान्यत: माथि वर्णन गरिएको सेम्यान्टिक मार्कअपको प्रयोगले ARIA को प्रयोगलाई प्रतिस्थापन गर्छ, तर कहिलेकाहीं विभिन्न HTML विजेटहरूको लागि कुनै सेम्यान्टिक समकक्ष हुँदैन। राम्रो उदाहरण हो ट्री। ट्रीको लागि HTML समकक्ष छैन, त्यसैले तपाईंले यस तत्वको सामान्य `<div>` लाई उपयुक्त भूमिका र ARIA मानहरू प्रयोग गरेर पहिचान गर्नुहुन्छ। [MDN को ARIA सम्बन्धी दस्तावेज](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) मा थप उपयोगी जानकारी समावेश छ।
✅ सामान्यतया, माथि वर्णन गरिएको सेम्यान्टिक मार्कअपको प्रयोगले ARIA को प्रयोगलाई प्रतिस्थापन गर्छ, तर कहिलेकाहीं HTML विजेटहरूको लागि कुनै सेम्यान्टिक समकक्ष हुँदैन। राम्रो उदाहरण हो ट्री। ट्रीको लागि HTML समकक्ष छैन, त्यसैले तपाईंले यस तत्वको सामान्य `<div>` लाई उपयुक्त भूमिका र ARIA मानहरूसँग पहिचान गर्नुहुन्छ। [MDN को ARIA दस्तावेज](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) मा थप उपयोगी जानकारी समावेश छ।
```html
<h2id="tree-label">File Viewer</h2>
@ -153,20 +153,20 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
## छविहरू
यो स्पष्ट छ कि स्क्रिन रिडरहरूले स्वत: छविमा के छ भनेर पढ्न सक्दैनन्। छविहरू पहुँचयोग्य बनाउने सुनिश्चित गर्न धेरै काम लाग्दैन - यो `alt` विशेषताको बारेमा हो। सबै अर्थपूर्ण छविहरूले तिनीहरू के हुन् भनेर वर्णन गर्न `alt` हुनुपर्छ।
शुद्ध रूपमा सजावटी छविहरूको `alt` विशेषता खाली स्ट्रिङमा सेट गर्नुपर्छ: `alt=""`। यसले स्क्रिन रिडरहरूलाई अनावश्यक रूपमा सजावटी छवि घोषणा गर्नबाट रोक्छ।
यो स्पष्ट छ कि स्क्रिन रिडरहरूले स्वत: छविमा के छ भनेर पढ्न सक्दैनन्। छविहरू पहुँचयोग्य बनाउने सुनिश्चित गर्न धेरै काम लाग्दैन - यो `alt` विशेषता बारे हो। सबै अर्थपूर्ण छविहरूले के हुन् भनेर वर्णन गर्न `alt` हुनुपर्छ।
शुद्ध सजावटी छविहरूको `alt` विशेषता खाली स्ट्रिङमा सेट गर्नुपर्छ: `alt=""`। यसले स्क्रिन रिडरलाई अनावश्यक रूपमा सजावटी छवि घोषणा गर्नबाट रोक्छ।
✅ तपाईंले अपेक्षा गर्न सक्नुहुन्छ, सर्च इन्जिनहरूले पनि छविमा के छ भनेर बुझ्न सक्दैनन्। तिनीहरूले पनि alt पाठ प्रयोग गर्छन्। त्यसैले फेरि, तपाईंको पृष्ठ पहुँचयोग्य बनाउने सुनिश्चित गर्दा थप बोनसहरू प्रदान गर्दछ!
✅ तपाईंले अपेक्षा गरेजस्तै, सर्च इन्जिनहरूले पनि छविमा के छ भनेर बुझ्न सक्दैनन्। तिनीहरूले पनि alt पाठ प्रयोग गर्छन्। त्यसैले फेरि, तपाईंको पृष्ठ पहुँचयोग्य बनाउने सुनिश्चित गर्दा थप बोनसहरू प्रदान गर्दछ!
## किबोर्ड
केही प्रयोगकर्ताहरू माउस वा ट्र्याकप्याड प्रयोग गर्न असमर्थ हुन्छन्, बरु किबोर्ड अन्तरक्रियामा निर्भर गर्छन् ताकि एक तत्वबाट अर्कोमा ट्याब गर्न सकियोस्। तपाईंको वेबसाइटले तपाईंको सामग्रीलाई तार्किक क्रममा प्रस्तुत गर्न महत्त्वपूर्ण छ ताकि किबोर्ड प्रयोगकर्ताले प्रत्येक अन्तरक्रियात्मक तत्वलाई कागजातमा तल जाँदा पहुँच गर्न सकून्। यदि तपाईंले सेम्यान्टिक मार्कअपको साथमा तपाईंको वेब पृष्ठहरू निर्माण गर्नुभयो र तिनीहरूको दृश्य लेआउटलाई शैली दिन CSS प्रयोग गर्नुभयो भने, तपाईंको साइट किबोर्ड-नेभिगेटेबल हुनुपर्छ, तर यो पक्षलाई म्यानुअली परीक्षण गर्नु महत्त्वपूर्ण छ। [किबोर्ड नेभिगेसन रणनीतिहरू](https://webaim.org/techniques/keyboard/) बारे थप जान्नुहोस्।
केही प्रयोगकर्ताहरू माउस वा ट्र्याकप्याड प्रयोग गर्न असमर्थ हुन्छन्, बरु किबोर्ड अन्तरक्रियामा निर्भर गर्छन् ताकि एक तत्वबाट अर्कोमा ट्याब गर्न सकियोस्। तपाईंको वेबसाइटले तपाईंको सामग्रीलाई तार्किक क्रममा प्रस्तुत गर्न महत्त्वपूर्ण छ ताकि किबोर्ड प्रयोगकर्ताले प्रत्येक अन्तरक्रियात्मक तत्वलाई कागजातमा तल जाँदा पहुँच गर्न सकियोस्। यदि तपाईंले सेम्यान्टिक मार्कअपको साथमा तपाईंको वेब पृष्ठहरू निर्माण गर्नुभयो र तिनीहरूको दृश्य लेआउट शैली गर्न CSS प्रयोग गर्नुभयो भने, तपाईंको साइट किबोर्ड-नेभिगेट गर्न योग्य हुनुपर्छ, तर यो पक्षलाई म्यानुअल रूपमा परीक्षण गर्नु महत्त्वपूर्ण छ। [किबोर्ड नेभिगेसन रणनीतिहरू](https://webaim.org/techniques/keyboard/) बारे थप जान्नुहोस्।
✅ कुनै पनि वेबसाइटमा जानुहोस् र केवल तपाईंको किबोर्ड प्रयोग गरेर नेभिगेट गर्न प्रयास गर्नुहोस्। के काम गर्छ, के काम गर्दैन? किन?
## सारांश
केहीलाई मात्र पहुँचयोग्य वेब वास्तवमै 'वर्ल्ड-वाइड वेब' होइन। तपाईंले सिर्जना गर्ने साइटहरू पहुँचयोग्य छन् भनेर सुनिश्चित गर्ने सबैभन्दा राम्रो तरिका सुरुबाट पहुँचयोग्यता उत्तम अभ्यासहरू समावेश गर्नु हो। जबकि यसमा अतिरिक्त चरणहरू समावेश छन्, अहिले यी सीपहरू तपाईंको कार्यप्रवाहमा समावेश गर्दा तपाईंले सिर्जना गर्ने सबै पृष्ठहरू पहुँचयोग्य हुनेछन्।
केहीलाई मात्र पहुँचयोग्य वेब वास्तवमा 'वर्ल्ड-वाइड वेब' होइन। तपाईंले सिर्जना गर्ने साइटहरू पहुँचयोग्य छन् भनेर सुनिश्चित गर्ने सबैभन्दा राम्रो तरिका भनेको सुरुबाट पहुँचयोग्यता उत्तम अभ्यासहरू समावेश गर्नु हो। जबकि यसमा अतिरिक्त कदमहरू समावेश छन्, अहिले यी सीपहरू तपाईंको कार्यप्रवाहमा समावेश गर्दा तपाईंले सिर्जना गर्ने सबै पृष्ठहरू पहुँचयोग्य हुनेछन्।
---
@ -218,7 +218,7 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
@ -239,4 +239,4 @@ CSS ले पृष्ठमा कुनै पनि तत्वको र
---
**अस्वीकरण**:
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
यो दस्तावेज़ AI अनुवाद सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) प्रयोग गरेर अनुवाद गरिएको छ। हामी यथार्थताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटि वा अशुद्धता हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
> Ang kapangyarihan ng Web ay nasa pagiging pangkalahatan nito. Ang pag-access ng lahat, anuman ang kapansanan, ay isang mahalagang aspeto.
> Ang kapangyarihan ng Web ay nasa pagiging unibersal nito. Ang pag-access ng lahat, anuman ang kapansanan, ay isang mahalagang aspeto.
>
> \- Sir Timothy Berners-Lee, Direktor ng W3C at imbentor ng World Wide Web
> \- Sir Timothy Berners-Lee, W3C Director at imbentor ng World Wide Web
Ang siping ito ay perpektong nagpapakita ng kahalagahan ng paggawa ng mga website na accessible. Ang isang aplikasyon na hindi ma-access ng lahat ay, sa kahulugan, nagiging eksklusibo. Bilang mga web developer, dapat palaging nasa isip natin ang accessibility. Sa pamamagitan ng pagtuon dito mula sa simula, masisiguro mong ma-access ng lahat ang mga pahinang iyong nilikha. Sa araling ito, matututuhan mo ang mga tool na makakatulong sa iyo upang masiguro na ang iyong mga web asset ay accessible at kung paano magdisenyo nang may accessibility sa isip.
Ang siping ito ay perpektong nagpapakita ng kahalagahan ng paggawa ng mga accessible na website. Ang isang aplikasyon na hindi ma-access ng lahat ay, sa esensya, nagiging eksklusibo. Bilang mga web developer, dapat nating laging isaisip ang accessibility. Sa pamamagitan ng pagtutok dito mula sa simula, masisiguro mong ma-access ng lahat ang mga pahinang iyong nilikha. Sa araling ito, matututuhan mo ang mga tool na makakatulong sa iyong tiyakin na ang iyong mga web asset ay accessible at kung paano magdisenyo nang may accessibility sa isip.
> Maaari mong kunin ang araling ito sa [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
## Mga Tool na Gagamitin
### Screen readers
### Screen Readers
Isa sa mga pinakakilalang tool para sa accessibility ay ang screen readers.
Isa sa mga pinakakilalang accessibility tool ay ang mga screen reader.
[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) ay karaniwang ginagamit ng mga taong may kapansanan sa paningin. Habang ginugugol natin ang oras upang masiguro na maayos na naipapakita ng browser ang impormasyong nais nating ibahagi, dapat din nating tiyakin na nagagawa rin ito ng screen reader.
[Screen readers](https://en.wikipedia.org/wiki/Screen_reader) ay karaniwang ginagamit ng mga taong may kapansanan sa paningin. Habang ginugugol natin ang oras upang tiyakin na maayos na naipapakita ng browser ang impormasyong nais nating ibahagi, dapat din nating tiyakin na magagawa rin ito ng screen reader.
Sa pinaka-basic na antas, ang screen reader ay magbabasa ng isang pahina mula itaas hanggang ibaba nang malakas. Kung ang iyong pahina ay puro teksto, ang reader ay magpapahayag ng impormasyon sa parehong paraan tulad ng browser. Siyempre, bihira ang mga web page na puro teksto; kadalasan ay may mga link, graphics, kulay, at iba pang visual na bahagi. Kailangang tiyakin na ang impormasyong ito ay maayos na nababasa ng screen reader.
Sa pinakasimple nitong anyo, ang screen reader ay babasahin ang isang pahina mula itaas hanggang ibaba nang pasalita. Kung ang iyong pahina ay puro teksto, ipapahayag ng reader ang impormasyon sa katulad na paraan ng browser. Siyempre, bihira ang mga web page na puro teksto lamang; karaniwan itong naglalaman ng mga link, graphics, kulay, at iba pang visual na bahagi. Kailangang tiyakin na ang impormasyong ito ay maayos na nababasa ng screen reader.
Bawat web developer ay dapat maging pamilyar sa paggamit ng screen reader. Tulad ng nabanggit sa itaas, ito ang client na gagamitin ng iyong mga user. Katulad ng pagiging pamilyar mo sa kung paano gumagana ang browser, dapat mo ring alamin kung paano gumagana ang screen reader. Sa kabutihang-palad, ang screen readers ay built-in sa karamihan ng mga operating system.
Dapat maging pamilyar ang bawat web developer sa paggamit ng screen reader. Tulad ng nabanggit, ito ang kliyente na gagamitin ng iyong mga user. Katulad ng pagiging pamilyar mo sa kung paano gumagana ang isang browser, dapat mo ring alamin kung paano gumagana ang isang screen reader. Sa kabutihang-palad, ang mga screen reader ay naka-built-in na sa karamihan ng mga operating system.
Ang ilang browser ay mayroon ding built-in na mga tool at extension na maaaring magbasa ng teksto nang malakas o magbigay ng mga pangunahing navigational feature, tulad ng [mga tool na nakatuon sa accessibility ng Edge browser](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Mahalaga rin ang mga ito bilang mga tool para sa accessibility, ngunit gumagana nang iba sa screen readers at hindi dapat ituring bilang mga tool para sa pagsusuri ng screen reader.
Ang ilang browser ay mayroon ding mga built-in na tool at extension na maaaring magbasa ng teksto nang malakas o magbigay ng mga pangunahing feature sa pag-navigate, tulad ng [mga accessibility-focused na tool ng Edge browser](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Mahalaga rin ang mga ito bilang mga accessibility tool, ngunit gumagana ang mga ito nang iba sa mga screen reader at hindi dapat ituring bilang mga tool para sa pagsubok ng screen reader.
✅ Subukan ang isang screen reader at browser text reader. Sa Windows, [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ay kasama bilang default, at maaaring i-install ang [JAWS](https://webaim.org/articles/jaws/) at [NVDA](https://www.nvaccess.org/about-nvda/). Sa macOS at iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) ay naka-install bilang default.
✅ Subukan ang isang screen reader at browser text reader. Sa Windows, ang [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ay kasama na bilang default, at maaaring i-install ang [JAWS](https://webaim.org/articles/jaws/) at [NVDA](https://www.nvaccess.org/about-nvda/). Sa macOS at iOS, naka-install na bilang default ang [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10).
### Zoom
Isa pang tool na karaniwang ginagamit ng mga taong may kapansanan sa paningin ay ang pag-zoom. Ang pinaka-basic na uri ng pag-zoom ay static zoom, na kinokontrol sa pamamagitan ng `Control + plus sign (+)` o sa pamamagitan ng pagbabawas ng screen resolution. Ang ganitong uri ng pag-zoom ay nagdudulot ng pag-resize ng buong pahina, kaya mahalaga ang paggamit ng [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) upang magbigay ng magandang karanasan sa user sa mas mataas na antas ng pag-zoom.
Isa pang tool na karaniwang ginagamit ng mga taong may kapansanan sa paningin ay ang pag-zoom. Ang pinakapayak na uri ng pag-zoom ay static zoom, na kinokontrol sa pamamagitan ng `Control + plus sign (+)` o sa pamamagitan ng pagpapababa ng screen resolution. Ang ganitong uri ng pag-zoom ay nagdudulot ng pag-resize ng buong pahina, kaya mahalaga ang paggamit ng [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) upang magbigay ng magandang karanasan sa user kahit sa mas mataas na antas ng pag-zoom.
Ang isa pang uri ng pag-zoom ay umaasa sa specialized software upang palakihin ang isang bahagi ng screen at mag-pan, katulad ng paggamit ng totoong magnifying glass. Sa Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) ay built-in, at ang [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ay third-party magnification software na may mas maraming feature at mas malaking user base. Ang parehong macOS at iOS ay may built-in na magnification software na tinatawag na [Zoom](https://www.apple.com/accessibility/mac/vision/).
Ang isa pang uri ng pag-zoom ay umaasa sa espesyal na software upang palakihin ang isang bahagi ng screen at mag-pan, katulad ng paggamit ng totoong magnifying glass. Sa Windows, ang [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) ay naka-built-in, at ang [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ay isang third-party magnification software na may mas maraming feature at mas malaking user base. Parehong may built-in na magnification software na tinatawag na [Zoom](https://www.apple.com/accessibility/mac/vision/) ang macOS at iOS.
### Contrast checkers
### Contrast Checkers
Ang mga kulay sa mga website ay kailangang maingat na piliin upang matugunan ang pangangailangan ng mga user na may color blindness o mga taong nahihirapan sa mababang contrast na mga kulay.
Ang mga kulay sa mga website ay kailangang maingat na piliin upang matugunan ang pangangailangan ng mga user na may color blindness o hirap makakita ng mga kulay na mababa ang contrast.
✅ Subukan ang isang website na gusto mong gamitin para sa pagsusuri ng paggamit ng kulay gamit ang isang browser extension tulad ng [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Ano ang natutunan mo?
✅ Subukan ang isang website na gusto mong gamitin para sa paggamit ng kulay gamit ang isang browser extension tulad ng [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Ano ang natutunan mo?
### Lighthouse
Sa developer tool area ng iyong browser, makikita mo ang Lighthouse tool. Ang tool na ito ay mahalaga upang makakuha ng unang pagsusuri sa accessibility (pati na rin ang iba pang analysis) ng isang website. Bagama't mahalagang huwag umasa lamang sa Lighthouse, ang 100% score ay napakahalaga bilang baseline.
Sa developer tool area ng iyong browser, makikita mo ang Lighthouse tool. Mahalaga ang tool na ito upang makakuha ng unang pagsusuri sa accessibility (pati na rin ang iba pang pagsusuri) ng isang website. Bagama't mahalagang huwag umasa lamang sa Lighthouse, ang 100% na score ay napakahalaga bilang baseline.
✅ Hanapin ang Lighthouse sa developer tool panel ng iyong browser at magsagawa ng pagsusuri sa anumang site. Ano ang natuklasan mo?
## Pagdidisenyo para sa Accessibility
Ang accessibility ay isang medyo malawak na paksa. Upang matulungan ka, maraming mga mapagkukunan ang magagamit.
Ang accessibility ay isang medyo malawak na paksa. Upang matulungan ka, maraming mapagkukunan ang magagamit.
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
Bagama't hindi natin matatalakay ang bawat aspeto ng paggawa ng mga accessible na site, narito ang ilan sa mga pangunahing prinsipyo na nais mong ipatupad. Ang pagdidisenyo ng isang accessible na pahina mula sa simula ay **palaging** mas madali kaysa sa pagbalik sa isang umiiral na pahina upang gawing accessible ito.
Bagama't hindi natin matatalakay ang bawat aspeto ng paggawa ng mga accessible na site, narito ang ilan sa mga pangunahing prinsipyo na nais mong ipatupad. Ang pagdidisenyo ng isang accessible na pahina mula sa simula ay **laging** mas madali kaysa sa pagbalik sa isang umiiral na pahina upang gawing accessible ito.
## Magandang Prinsipyo sa Display
### Mga Color Safe Palette
Iba't ibang paraan ang nakikita ng mga tao sa mundo, kabilang na ang mga kulay. Kapag pumipili ng color scheme para sa iyong site, dapat mong tiyakin na ito ay accessible sa lahat. Isang mahusay na [tool para sa pagbuo ng mga color palette ay Color Safe](http://colorsafe.co/).
Iba-iba ang paraan ng pagtingin ng mga tao sa mundo, kabilang na ang mga kulay. Kapag pumipili ng color scheme para sa iyong site, dapat mong tiyakin na ito ay accessible sa lahat. Isang mahusay na [tool para sa pagbuo ng mga color palette ay ang Color Safe](http://colorsafe.co/).
✅ Tukuyin ang isang website na may malaking problema sa paggamit ng kulay. Bakit?
### Gumamit ng Tamang HTML
Sa CSS at JavaScript, posible na gawing mukhang anumang uri ng control ang anumang elemento. Ang `<span>` ay maaaring gamitin upang lumikha ng `<button>`, at ang `<b>` ay maaaring maging hyperlink. Bagama't maaaring mas madali itong i-style, wala itong ipinapahayag sa screen reader. Gumamit ng tamang HTML kapag gumagawa ng mga control sa isang pahina. Kung nais mo ng hyperlink, gumamit ng `<a>`. Ang paggamit ng tamang HTML para sa tamang control ay tinatawag na paggamit ng Semantic HTML.
Sa pamamagitan ng CSS at JavaScript, posible na gawing mukhang anumang uri ng control ang anumang elemento. Ang `<span>` ay maaaring gamitin upang lumikha ng `<button>`, at ang `<b>` ay maaaring gawing hyperlink. Bagama't maaaring mas madaling i-style ito, wala itong naipapahayag sa isang screen reader. Gumamit ng tamang HTML kapag gumagawa ng mga control sa isang pahina. Kung nais mo ng hyperlink, gumamit ng `<a>`. Ang paggamit ng tamang HTML para sa tamang control ay tinatawag na paggamit ng Semantic HTML.
✅ Pumunta sa anumang website at tingnan kung ang mga designer at developer ay gumagamit ng HTML nang maayos. Makakakita ka ba ng button na dapat ay isang link? Tip: i-right click at piliin ang 'View Page Source' sa iyong browser upang tingnan ang underlying code.
✅ Pumunta sa anumang website at tingnan kung ang mga designer at developer ay gumagamit ng HTML nang tama. Makakakita ka ba ng button na dapat ay isang link? Tip: i-right click at piliin ang 'View Page Source' sa iyong browser upang tingnan ang underlying code.
### Gumawa ng Descriptive Heading Hierarchy
### Gumawa ng Descriptive na Heading Hierarchy
Ang mga user ng screen reader ay [malaki ang inaasahan sa mga heading](https://webaim.org/projects/screenreadersurvey8/#finding) upang makahanap ng impormasyon at mag-navigate sa isang pahina. Ang pagsusulat ng descriptive heading content at paggamit ng semantic heading tags ay mahalaga para sa paggawa ng isang site na madaling i-navigate para sa mga user ng screen reader.
Ang mga gumagamit ng screen reader ay [umaasa nang malaki sa mga heading](https://webaim.org/projects/screenreadersurvey8/#finding) upang makahanap ng impormasyon at mag-navigate sa isang pahina. Ang pagsusulat ng descriptive na nilalaman ng heading at paggamit ng semantic heading tags ay mahalaga para sa paggawa ng isang site na madaling ma-navigate para sa mga gumagamit ng screen reader.
### Gumamit ng Magandang Visual Clues
Ang CSS ay nag-aalok ng kumpletong kontrol sa hitsura ng anumang elemento sa isang pahina. Maaari kang lumikha ng mga text box na walang outline o mga hyperlink na walang underline. Sa kasamaang-palad, ang pag-aalis ng mga clues na ito ay maaaring gawing mas mahirap para sa isang taong umaasa sa mga ito upang makilala ang uri ng control.
Nag-aalok ang CSS ng kumpletong kontrol sa hitsura ng anumang elemento sa isang pahina. Maaari kang lumikha ng mga text box na walang outline o mga hyperlink na walang underline. Sa kasamaang-palad, ang pag-aalis ng mga clue na ito ay maaaring gawing mas mahirap para sa isang taong umaasa sa mga ito na makilala ang uri ng control.
## Ang Kahalagahan ng Link Text
Ang mga hyperlink ay mahalaga sa pag-navigate sa web. Dahil dito, ang pagtiyak na maayos na mababasa ng screen reader ang mga link ay nagbibigay-daan sa lahat ng user na mag-navigate sa iyong site.
### Screen Readers at Links
### Screen Readers at Mga Link
Tulad ng inaasahan, binabasa ng screen readers ang link text sa parehong paraan na binabasa nila ang anumang ibang teksto sa pahina. Sa ganitong pananaw, ang teksto na ipinakita sa ibaba ay maaaring mukhang katanggap-tanggap.
Tulad ng inaasahan, binabasa ng mga screen reader ang link text sa parehong paraan ng pagbabasa nila ng anumang iba pang teksto sa pahina. Sa ganitong pananaw, ang teksto na ipinakita sa ibaba ay maaaring mukhang katanggap-tanggap.
> Ang maliit na penguin, na kilala rin bilang fairy penguin, ay ang pinakamaliit na penguin sa mundo. [I-click dito](https://en.wikipedia.org/wiki/Little_penguin) para sa karagdagang impormasyon.
> Ang maliit na penguin, na kilala rin bilang fairy penguin, ang pinakamaliit na penguin sa mundo. [I-click dito](https://en.wikipedia.org/wiki/Little_penguin) para sa karagdagang impormasyon.
> Ang maliit na penguin, na kilala rin bilang fairy penguin, ay ang pinakamaliit na penguin sa mundo. Bisitahin ang https://en.wikipedia.org/wiki/Little_penguin para sa karagdagang impormasyon.
> Ang maliit na penguin, na kilala rin bilang fairy penguin, ang pinakamaliit na penguin sa mundo. Bisitahin ang https://en.wikipedia.org/wiki/Little_penguin para sa karagdagang impormasyon.
> **NOTE** Tulad ng mababasa mo, hindi ka dapat **kailanman** gumawa ng mga link na mukhang tulad ng nasa itaas.
> **NOTE** Tulad ng mababasa mo, **huwag kailanman** lumikha ng mga link na katulad ng nasa itaas.
Tandaan, ang screen readers ay ibang interface mula sa browsers na may ibang set ng features.
Tandaan, ang mga screen reader ay ibang interface mula sa mga browser na may ibang set ng mga feature.
### Ang Problema sa Paggamit ng URL
Binabasa ng screen readers ang teksto. Kung ang URL ay lumilitaw sa teksto, babasahin ng screen reader ang URL. Sa pangkalahatan, ang URL ay hindi nagbibigay ng makabuluhang impormasyon, at maaaring tunog nakakainis. Maaaring naranasan mo ito kung ang iyong telepono ay kailanman nagbasa nang malakas ng isang text message na may URL.
Binabasa ng mga screen reader ang teksto. Kung ang URL ay lumalabas sa teksto, babasahin ito ng screen reader. Sa pangkalahatan, ang URL ay hindi nagbibigay ng makabuluhang impormasyon, at maaaring nakakainis pakinggan. Maaaring naranasan mo ito kung ang iyong telepono ay kailanman nagbasa nang malakas ng isang text message na may URL.
### Ang Problema sa "I-click Dito"
Ang screen readers ay mayroon ding kakayahang basahin lamang ang mga hyperlink sa isang pahina, katulad ng paraan ng pag-scan ng isang taong nakakakita sa pahina para sa mga link. Kung ang link text ay palaging "I-click Dito", ang maririnig ng user ay "I-click Dito, I-click Dito, I-click Dito, I-click Dito, I-click Dito, ..." Ang lahat ng link ay nagiging hindi maipagkaiba sa isa't isa.
May kakayahan din ang mga screen reader na basahin lamang ang mga hyperlink sa isang pahina, katulad ng paraan ng pag-scan ng isang taong nakakakita sa pahina para sa mga link. Kung ang link text ay palaging "i-click dito", ang maririnig lamang ng user ay "i-click dito, i-click dito, i-click dito, i-click dito, i-click dito, ..." Ang lahat ng mga link ay nagiging hindi makilala mula sa isa't isa.
### Magandang Link Text
Ang magandang link text ay maikli ngunit malinaw na naglalarawan kung ano ang nasa kabilang dulo ng link. Sa halimbawa sa itaas tungkol sa maliit na penguin, ang link ay patungo sa Wikipedia page tungkol sa species. Ang pariralang *maliit na penguin* ay magiging perpektong link text dahil malinaw nitong ipinapakita kung ano ang matututuhan ng isang tao kung i-click ang link - maliit na penguin.
Ang magandang link text ay maikli ngunit naglalarawan kung ano ang nasa kabilang dulo ng link. Sa halimbawa sa itaas tungkol sa maliit na penguin, ang link ay patungo sa Wikipedia page tungkol sa species. Ang pariralang *maliit na penguin* ay magiging perpektong link text dahil malinaw nitong ipinapakita kung ano ang matututuhan ng isang tao kung i-click ang link - maliit na penguin.
> Ang [maliit na penguin](https://en.wikipedia.org/wiki/Little_penguin), na kilala rin bilang fairy penguin, ay ang pinakamaliit na penguin sa mundo.
> Ang [maliit na penguin](https://en.wikipedia.org/wiki/Little_penguin), na kilala rin bilang fairy penguin, ang pinakamaliit na penguin sa mundo.
✅ Mag-surf sa web nang ilang minuto upang makahanap ng mga pahina na gumagamit ng hindi malinaw na mga estratehiya sa pag-link. Ihambing ang mga ito sa iba pang mas mahusay na naka-link na mga site. Ano ang natutunan mo?
#### Mga Tala sa Search Engine
Bilang karagdagang benepisyo ng pagtiyak na ang iyong site ay accessible sa lahat, matutulungan mo ang mga search engine na mag-navigate sa iyong site. Ginagamit ng mga search engine ang link text upang matutunan ang mga paksa ng mga pahina. Kaya ang paggamit ng magandang link text ay nakakatulong sa lahat!
Bilang karagdagang benepisyo ng pagtiyak na ang iyong site ay accessible sa lahat, matutulungan mo rin ang mga search engine na mag-navigate sa iyong site. Ginagamit ng mga search engine ang link text upang matutunan ang mga paksa ng mga pahina. Kaya ang paggamit ng magandang link text ay nakakatulong sa lahat!
| Super widget | [Paglalarawan](../../../../1-getting-started-lessons/3-accessibility/') | [Order](../../../../1-getting-started-lessons/3-accessibility/') |
Sa halimbawang ito, ang pag-uulit ng teksto ng deskripsyon at order ay may katuturan para sa isang taong gumagamit ng browser. Gayunpaman, ang isang taong gumagamit ng screen reader ay maririnig lamang ang mga salitang *deskripsyon* at *order* na paulit-ulit nang walang konteksto.
Sa halimbawang ito, ang pag-uulit ng teksto ng paglalarawan at order ay may katuturan para sa isang taong gumagamit ng browser. Gayunpaman, ang isang taong gumagamit ng screen reader ay maririnig lamang ang mga salitang *paglalarawan* at *order* na paulit-ulit nang walang konteksto.
Upang suportahan ang ganitong uri ng mga sitwasyon, ang HTML ay sumusuporta sa isang set ng mga attribute na kilala bilang [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ang mga attribute na ito ay nagbibigay-daan sa iyo upang magbigay ng karagdagang impormasyon sa mga screen reader.
Upang suportahan ang mga ganitong uri ng sitwasyon, sinusuportahan ng HTML ang isang hanay ng mga attribute na kilala bilang [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ang mga attribute na ito ay nagbibigay-daan sa iyo na magbigay ng karagdagang impormasyon sa mga screen reader.
> **NOTE**: Tulad ng maraming aspeto ng HTML, maaaring mag-iba ang suporta ng browser at screen reader. Gayunpaman, karamihan sa mga pangunahing client ay sumusuporta sa ARIA attributes.
> **NOTE**: Tulad ng maraming aspeto ng HTML, maaaring mag-iba ang suporta ng browser at screen reader. Gayunpaman, karamihan sa mga pangunahing kliyente ay sumusuporta sa mga ARIA attribute.
Maaari mong gamitin ang `aria-label` upang ilarawan ang link kapag ang format ng pahina ay hindi pinapayagan ito. Ang deskripsyon para sa widget ay maaaring itakda bilang
Maaari mong gamitin ang `aria-label` upang ilarawan ang link kapag ang format ng pahina ay hindi nagpapahintulot sa iyo na gawin ito. Ang paglalarawan para sa widget ay maaaring itakda bilang
✅ Sa pangkalahatan, ang paggamit ng Semantic markup tulad ng inilarawan sa itaas ay mas mahalaga kaysa sa paggamit ng ARIA, ngunit minsan walang semantic equivalent para sa iba't ibang HTML widgets. Isang magandang halimbawa ay ang Tree. Walang HTML equivalent para sa isang tree, kaya tinutukoy mo ang generic`<div>` para sa elementong ito gamit ang tamang role at mga ARIA value. Ang [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) ay naglalaman ng mas kapaki-pakinabang na impormasyon.
✅ Sa pangkalahatan, ang paggamit ng Semantic markup tulad ng inilarawan sa itaas ay mas mahalaga kaysa sa paggamit ng ARIA, ngunit kung minsan ay walang semantic na katumbas para sa iba't ibang HTML widget. Isang magandang halimbawa ay ang Tree. Walang HTML na katumbas para sa isang tree, kaya't tinutukoy mo ang generic na`<div>` para sa elementong ito gamit ang tamang role at mga ARIA value. Ang [MDN documentation sa ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) ay naglalaman ng mas kapaki-pakinabang na impormasyon.
```html
<h2id="tree-label">File Viewer</h2>
@ -153,27 +153,28 @@ Maaari mong gamitin ang `aria-label` upang ilarawan ang link kapag ang format ng
</div>
```
## Mga Imahe
## Mga Larawan
Hindi na kailangang sabihin, ang mga screen reader ay hindi awtomatikong mababasa kung ano ang nasa isang imahe. Ang pagtiyak na ang mga imahe ay accessible ay hindi nangangailangan ng maraming trabaho - ito ang layunin ng `alt` attribute. Ang lahat ng makabuluhang imahe ay dapat magkaroon ng `alt` upang ilarawan kung ano ang mga ito. Ang mga imahe na purong dekoratibo ay dapat magkaroon ng kanilang `alt` attribute na nakatakda sa isang walang laman na string: `alt=""`. Pinipigilan nito ang mga screen reader na hindi kinakailangang i-anunsyo ang dekoratibong imahe.
Hindi na kailangang sabihin, ang mga screen reader ay hindi awtomatikong mababasa kung ano ang nasa isang larawan. Ang pagtiyak na ang mga larawan ay accessible ay hindi nangangailangan ng maraming trabaho - ito ang layunin ng `alt` attribute. Ang lahat ng makabuluhang larawan ay dapat may `alt` upang ilarawan kung ano ang mga ito.
Ang mga larawang purong dekoratibo ay dapat may `alt` attribute na nakatakda sa isang blangkong string: `alt=""`. Pinipigilan nito ang mga screen reader na hindi kinakailangang i-anunsyo ang dekoratibong larawan.
✅ Tulad ng inaasahan mo, ang mga search engine ay hindi rin nauunawaan kung ano ang nasa isang imahe. Ginagamit din nila ang alt text. Kaya muli, ang pagtiyak na ang iyong pahina ay accessible ay nagbibigay ng karagdagang benepisyo!
✅ Tulad ng inaasahan, ang mga search engine ay hindi rin kayang maunawaan kung ano ang nasa isang larawan. Ginagamit din nila ang alt text. Kaya muli, ang pagtiyak na ang iyong pahina ay accessible ay nagbibigay ng karagdagang benepisyo!
## Ang Keyboard
Ang ilang user ay hindi makagamit ng mouse o trackpad, sa halip ay umaasa sa mga keyboard interaction upang mag-tab mula sa isang elemento patungo sa susunod. Mahalagang ipakita ng iyong website ang iyong content sa lohikal na pagkakasunod-sunod upang ma-access ng isang keyboard user ang bawat interactive na elemento habang sila ay gumagalaw pababa sa dokumento. Kung itatayo mo ang iyong mga web page gamit ang semantic markup at gagamitinang CSS upang i-style ang kanilang visual layout, ang iyong site ay dapat na keyboard-navigable, ngunit mahalagang subukan ang aspetong ito nang manu-mano. Matuto nang higit pa tungkol sa [mga estratehiya sa keyboard navigation](https://webaim.org/techniques/keyboard/).
Ang ilang mga user ay hindi kayang gumamit ng mouse o trackpad, sa halip ay umaasa sa mga keyboard interaction upang mag-tab mula sa isang elemento patungo sa susunod. Mahalaga para sa iyong website na ipakita ang iyong nilalaman sa lohikal na pagkakasunod-sunod upang ma-access ng isang keyboard user ang bawat interactive na elemento habang sila ay gumagalaw pababa sa dokumento. Kung itatayo mo ang iyong mga web page gamit ang semantic markup at gagamit ng CSS upang i-style ang kanilang visual na layout, ang iyong site ay dapat na keyboard-navigable, ngunit mahalagang subukan ang aspetong ito nang manu-mano. Alamin ang higit pa tungkol sa [mga estratehiya sa keyboard navigation](https://webaim.org/techniques/keyboard/).
✅ Pumunta sa anumang website at subukang mag-navigate dito gamit lamang ang iyong keyboard. Ano ang gumagana, ano ang hindi gumagana? Bakit?
## Buod
Ang web na accessible lamang sa ilan ay hindi tunay na 'world-wide web'. Ang pinakamahusay na paraan upang masiguro na ang mga site na iyong nilikha ay accessible ay ang pagsama ng mga pinakamahusay na kasanayan sa accessibility mula sa simula. Bagama't may mga karagdagang hakbang na kasangkot, ang pagsasama ng mga kasanayang ito sa iyong workflow ngayon ay nangangahulugan na ang lahat ng mga pahinang iyong nilikha ay magiging accessible.
Ang web na accessible lamang sa ilan ay hindi tunay na 'world-wide web'. Ang pinakamahusay na paraan upang matiyak na ang mga site na iyong nilikha ay accessible ay ang pagsama ng mga pinakamahusay na kasanayan sa accessibility mula sa simula. Bagama't may mga karagdagang hakbang na kasangkot, ang pagsasama ng mga kasanayang ito sa iyong workflow ngayon ay nangangahulugan na ang lahat ng mga pahinang iyong nilikha ay magiging accessible.
---
## 🚀 Hamon
Kunin ang HTML na ito at isulat muli ito upang maging mas accessible hangga't maaari, batay sa mga estratehiyang natutunan mo.
Kunin ang HTML na ito at isulat muli ito upang maging mas accessible hangga't maaari, gamit ang mga estratehiyang natutunan mo.
```html
<!DOCTYPE html>
@ -219,7 +220,7 @@ Kunin ang HTML na ito at isulat muli ito upang maging mas accessible hangga't ma
Maraming gobyerno ang may mga batas tungkol sa mga kinakailangan sa accessibility. Alamin ang mga batas sa accessibility sa iyong sariling bansa. Ano ang saklaw nito, at ano ang hindi? Isang halimbawa ay [ang web site ng gobyernong ito](https://accessibility.blog.gov.uk/).
## Review at Self Study
Maraming gobyerno ang may mga batas tungkol sa mga kinakailangan sa accessibility. Magbasa tungkol sa mga batas sa accessibility ng iyong sariling bansa. Ano ang saklaw nito, at ano ang hindi? Isang halimbawa ay [ang web site ng gobyernong ito](https://accessibility.blog.gov.uk/).
## Takdang-Aralin
## Gawain
[Surian ang isang web site na hindi accessible](assignment.md)
Mga Kredito: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) mula sa Instrument
Mga Kredito: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) ng Instrument
[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/)
> ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر ہر کسی کے لیے رسائی ایک ضروری پہلو ہے۔
> ویب کی طاقت اس کی عالمگیریت میں ہے۔ معذوری سے قطع نظر، ہر کسی کے لیے رسائی ایک لازمی پہلو ہے۔
>
> \- سر ٹموتھی برنرز لی، W3C ڈائریکٹر اور ورلڈ وائڈ ویب کے موجد
> \- سر ٹموتھی برنرز لی، 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) عام طور پر بصارت سے محروم افراد کے لیے استعمال کیے جانے والے کلائنٹس ہیں۔ جیسے ہم وقت صرف کرتے ہیں کہ براؤزر وہ معلومات صحیح طریقے سے پہنچائے جو ہم شیئر کرنا چاہتے ہیں، ہمیں یہ بھی یقینی بنانا ہوگا کہ اسکرین ریڈر بھی وہی کرے۔
[اسکرین ریڈرز](https://en.wikipedia.org/wiki/Screen_reader) عام طور پر بصارت سے محروم افراد کے لیے استعمال کیے جانے والے کلائنٹس ہیں۔ جیسے ہم وقت صرف کرتے ہیں کہ براؤزر معلومات کو صحیح طریقے سے پہنچائے، ہمیں یہ بھی یقینی بنانا ہوگا کہ اسکرین ریڈر بھی ایسا ہی کرے۔
بنیادی طور پر، ایک اسکرین ریڈر صفحے کو اوپر سے نیچے تک آواز کے ذریعے پڑھتا ہے۔ اگر آپ کا صفحہ صرف متن پر مشتمل ہے، تو ریڈر معلومات کو اسی انداز میں پہنچائے گا جیسے براؤزر کرتا ہے۔ ظاہر ہے، ویب صفحات شاذ و نادر ہی صرف متن پر مشتمل ہوتے ہیں؛ ان میں لنکس، گرافکس، رنگ، اور دیگر بصری اجزاء شامل ہوتے ہیں۔ اس بات کو یقینی بنانے کے لیے احتیاط برتنی چاہیے کہ یہ معلومات اسکرین ریڈر کے ذریعے صحیح طریقے سے پڑھی جائے۔
بنیادی طور پر، ایک اسکرین ریڈر صفحے کو اوپر سے نیچے تک آواز کے ذریعے پڑھتا ہے۔ اگر آپ کا صفحہ مکمل طور پر متن پر مشتمل ہے، تو ریڈر معلومات کو اسی طرح پہنچائے گا جیسے براؤزر کرتا ہے۔ لیکن ویب صفحات شاذ و نادر ہی صرف متن پر مشتمل ہوتے ہیں؛ ان میں لنکس، گرافکس، رنگ، اور دیگر بصری اجزاء شامل ہوتے ہیں۔ اس بات کو یقینی بنانے کے لیے احتیاط برتنی چاہیے کہ یہ معلومات اسکرین ریڈر کے ذریعے صحیح طریقے سے پڑھی جائے۔
ہر ویب ڈویلپر کو اسکرین ریڈر سے واقف ہونا چاہیے۔ جیسا کہ اوپر بیان کیا گیا ہے، یہ وہ کلائنٹ ہے جسے آپ کے صارفین استعمال کریں گے۔ جیسے آپ براؤزر کے کام کرنے کے طریقے سے واقف ہیں، آپ کو اسکرین ریڈر کے کام کرنے کے طریقے سے بھی واقف ہونا چاہیے۔ خوش قسمتی سے، زیادہ تر آپریٹنگ سسٹمز میں اسکرین ریڈرز شامل ہیں۔
ہر ویب ڈویلپر کو اسکرین ریڈر سے واقف ہونا چاہیے۔ جیسا کہ اوپر ذکر کیا گیا ہے، یہ وہ کلائنٹ ہے جسے آپ کے صارفین استعمال کریں گے۔ جیسے آپ براؤزر کے کام کرنے کے طریقے سے واقف ہیں، آپ کو اسکرین ریڈر کے کام کرنے کے طریقے سے بھی واقف ہونا چاہیے۔ خوش قسمتی سے، زیادہ تر آپریٹنگ سسٹمز میں اسکرین ریڈرز شامل ہوتے ہیں۔
کچھ براؤزرز میں بھی بلٹ ان ٹولز اور ایکسٹینشنز موجود ہیں جو متن کو بلند آواز میں پڑھ سکتے ہیں یا کچھ بنیادی نیویگیشنل خصوصیات فراہم کر سکتے ہیں، جیسے [Edge براؤزر کے یہ قابل رسائی ٹولز](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)۔ یہ بھی اہم قابل رسائی ٹولز ہیں، لیکن یہ اسکرین ریڈر ٹیسٹنگ ٹولز کے طور پر غلط نہیں سمجھے جانے چاہئیں۔
کچھ براؤزرز میں بھی بلٹ ان ٹولز اور ایکسٹینشنز موجود ہیں جو متن کو بلند آواز میں پڑھ سکتے ہیں یا کچھ بنیادی نیویگیشن فیچرز فراہم کر سکتے ہیں، جیسے [Edge براؤزر کے یہ قابل رسائی ٹولز](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)۔ یہ بھی اہم قابل رسائی ٹولز ہیں، لیکن یہ اسکرین ریڈر ٹیسٹنگ ٹولز سے مختلف طریقے سے کام کرتے ہیں اور انہیں اسکرین ریڈر کے طور پر غلط نہیں سمجھنا چاہیے۔
✅ اسکرین ریڈر اور براؤزر ٹیکسٹ ریڈر آزمائیں۔ ونڈوز پر [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ڈیفالٹ کے طور پر شامل ہے، اور [JAWS](https://webaim.org/articles/jaws/) اور [NVDA](https://www.nvaccess.org/about-nvda/) بھی انسٹال کیے جا سکتے ہیں۔ macOS اور iOS پر، [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) ڈیفالٹ کے طور پر انسٹال ہے۔
@ -43,39 +43,39 @@ CO_OP_TRANSLATOR_METADATA:
بصارت سے محروم افراد کے ذریعہ عام طور پر استعمال ہونے والا ایک اور ٹول زومنگ ہے۔ زومنگ کی سب سے بنیادی قسم جامد زوم ہے، جسے `Control + plus sign (+)` یا اسکرین ریزولوشن کو کم کرکے کنٹرول کیا جاتا ہے۔ اس قسم کا زوم پورے صفحے کو دوبارہ سائز دیتا ہے، لہذا [جوابی ڈیزائن](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) کا استعمال بڑھتے ہوئے زوم لیولز پر اچھا صارف تجربہ فراہم کرنے کے لیے اہم ہے۔
زومنگ کی ایک اور قسم خصوصی سافٹ ویئر پر انحصار کرتی ہے جو اسکرین کے ایک علاقے کو بڑا کرتا ہے اور پین کرتا ہے، بالکل جیسے ایک حقیقی میگنیفائنگ گلاس استعمال کیا جاتا ہے۔ ونڈوز پر، [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/) کہا جاتا ہے۔
زومنگ کی ایک اور قسم خصوصی سافٹ ویئر پر انحصار کرتی ہے جو اسکرین کے ایک علاقے کو بڑا کرتا ہے اور پین کرتا ہے، بالکل حقیقی میگنیفائنگ گلاس کی طرح۔ ونڈوز پر، [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 کا کلر چیکر](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) کے ساتھ رنگوں کا تجزیہ کریں۔ آپ کیا سیکھتے ہیں؟
✅ کسی ایسی ویب سائٹ کو آزمائیں جسے آپ استعمال کرنا پسند کرتے ہیں اور براؤزر ایکسٹینشن جیسے [WCAG کا کلر چیکر](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) کے ذریعے رنگوں کا تجزیہ کریں۔ آپ کیا سیکھتے ہیں؟
### Lighthouse
### لائٹ ہاؤس
آپ کے براؤزر کے ڈویلپر ٹول ایریا میں، آپ کو Lighthouse ٹول ملے گا۔ یہ ٹول کسی ویب سائٹ کی قابل رسائی (اور دیگر تجزیہ) کا پہلا جائزہ حاصل کرنے کے لیے اہم ہے۔ جبکہ صرف Lighthouse پر انحصار کرنا ضروری نہیں ہے، 100% اسکور ایک بہت مددگار بنیاد ہے۔
آپ کے براؤزر کے ڈویلپر ٹول ایریا میں، آپ کو لائٹ ہاؤس ٹول ملے گا۔ یہ ٹول کسی ویب سائٹ کی قابل رسائی (اور دیگر تجزیہ) کا پہلا جائزہ حاصل کرنے کے لیے اہم ہے۔ اگرچہ صرف لائٹ ہاؤس پر انحصار کرنا ضروری نہیں ہے، لیکن 100% اسکور ایک مفید بنیاد فراہم کرتا ہے۔
✅ اپنے براؤزر کے ڈویلپر ٹول پینل میں Lighthouse تلاش کریں اور کسی بھی سائٹ پر تجزیہ چلائیں۔ آپ کیا دریافت کرتے ہیں؟
✅ اپنے براؤزر کے ڈویلپر ٹول پینل میں لائٹ ہاؤس تلاش کریں اور کسی بھی سائٹ پر تجزیہ چلائیں۔ آپ کیا دریافت کرتے ہیں؟
## قابل رسائی ڈیزائن بنانا
## قابل رسائی ڈیزائننگ
قابل رسائی ہونا ایک نسبتاً بڑا موضوع ہے۔ آپ کی مدد کے لیے، متعدد وسائل دستیاب ہیں۔
قابل رسائی ایک نسبتاً بڑا موضوع ہے۔ آپ کی مدد کے لیے، متعدد وسائل دستیاب ہیں۔
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
جبکہ ہم قابل رسائی سائٹس بنانے کے ہر پہلو کو کور نہیں کر سکیں گے، نیچے کچھ بنیادی اصول دیے گئے ہیں جنہیں آپ نافذ کرنا چاہیں گے۔ ابتدا سے ایک قابل رسائی صفحہ ڈیزائن کرنا **ہمیشہ** موجودہ صفحے کو قابل رسائی بنانے کے لیے واپس جانے سے آسان ہوتا ہے۔
اگرچہ ہم قابل رسائی سائٹس بنانے کے ہر پہلو کا احاطہ نہیں کر سکیں گے، نیچے کچھ بنیادی اصول دیے گئے ہیں جنہیں آپ نافذ کرنا چاہیں گے۔ ابتدا سے ایک قابل رسائی صفحہ ڈیزائن کرنا **ہمیشہ** موجودہ صفحے کو قابل رسائی بنانے کے لیے واپس جانے سے آسان ہے۔
## اچھے ڈسپلے اصول
### رنگوں کے محفوظ پیلیٹس
لوگ دنیا کو مختلف طریقوں سے دیکھتے ہیں، اور اس میں رنگ بھی شامل ہیں۔ اپنی سائٹ کے لیے رنگ سکیم منتخب کرتے وقت، آپ کو یہ یقینی بنانا چاہیے کہ یہ سب کے لیے قابل رسائی ہو۔ ایک بہترین [رنگ پیلیٹس بنانے کا ٹول Color Safe](http://colorsafe.co/) ہے۔
لوگ دنیا کو مختلف طریقوں سے دیکھتے ہیں، اور اس میں رنگ بھی شامل ہیں۔ اپنی سائٹ کے لیے رنگ سکیم منتخب کرتے وقت، آپ کو یہ یقینی بنانا چاہیے کہ یہ سب کے لیے قابل رسائی ہو۔ رنگ پیلیٹس بنانے کے لیے ایکبہترین [ٹول Color Safe](http://colorsafe.co/) ہے۔
✅ ایسی ویب سائٹ کی شناخت کریں جو رنگوں کے استعمال میں بہت زیادہ مسئلہ پیدا کرتی ہو۔ کیوں؟
### صحیح HTML کا استعمال کریں
CSS اور JavaScript کے ساتھ، کسی بھی عنصر کو کسی بھی قسم کے کنٹرول کی طرح دکھانا ممکن ہے۔ `<span>` کو `<button>` بنانے کے لیے استعمال کیا جا سکتا ہے، اور `<b>` کو ہائپر لنک بنایا جا سکتا ہے۔ جبکہ یہ اسٹائل کرنے میں آسان سمجھا جا سکتا ہے، یہ اسکرین ریڈر کو کچھ نہیں بتاتا۔ صفحے پر کنٹرولز بناتے وقت مناسب HTML کا استعمال کریں۔ اگر آپ کو ہائپر لنک چاہیے، تو `<a>` استعمال کریں۔ صحیح کنٹرول کے لیے صحیح HTML کا استعمال کرنا Semantic HTML کا استعمال کہلاتا ہے۔
CSS اور جاوا اسکرپٹ کے ساتھ، کسی بھی عنصر کو کسی بھی قسم کے کنٹرول کی طرح دکھانا ممکن ہے۔ `<span>` کو `<button>` بنانے کے لیے استعمال کیا جا سکتا ہے، اور `<b>` کو ہائپر لنک بنایا جا سکتا ہے۔ اگرچہ یہ اسٹائل کرنے میں آسان سمجھا جا سکتا ہے، لیکن یہ اسکرین ریڈر کو کچھ نہیں بتاتا۔ صفحے پر کنٹرولز بناتے وقت مناسب HTML کا استعمال کریں۔ اگر آپ ہائپر لنک چاہتے ہیں، تو `<a>` استعمال کریں۔ صحیح کنٹرول کے لیے صحیح HTML کا استعمال کرنا سیمینٹک HTML کا استعمال کہلاتا ہے۔
✅ کسی بھی ویب سائٹ پر جائیں اور دیکھیں کہ آیا ڈیزائنرز اور ڈویلپرز HTML کو صحیح طریقے سے استعمال کر رہے ہیں۔ کیا آپ کو کوئی ایسا بٹن ملتا ہے جو لنک ہونا چاہیے؟ اشارہ: اپنے براؤزر میں 'View Page Source' منتخب کرنے کے لیے دائیں کلک کریں اور بنیادی کوڈ دیکھیں۔
@ -93,33 +93,33 @@ CSS صفحے پر کسی بھی عنصر کی شکل پر مکمل کنٹرول
### اسکرین ریڈرز اور لنکس
جیسا کہ آپ توقع کریں گے، اسکرین ریڈرز لنک ٹیکسٹ کو اسی طرح پڑھتے ہیں جیسے وہ صفحے پر موجود کسی دوسرے متن کو پڑھتے ہیں۔ اس بات کو ذہن میں رکھتے ہوئے، نیچے دکھایا گیا متن بالکل قابل قبول محسوس ہو سکتا ہے۔
جیسا کہ آپ توقع کریں گے، اسکرین ریڈرز لنک ٹیکسٹ کو اسی طرح پڑھتے ہیں جیسے وہ صفحے پر موجود کسی دوسرے متن کو پڑھتے ہیں۔ اس بات کو مدنظر رکھتے ہوئے، نیچے دکھایا گیا متن بالکل قابل قبول محسوس ہو سکتا ہے۔
> چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔ [یہاں کلک کریں](https://en.wikipedia.org/wiki/Little_penguin) مزید معلومات کے لیے۔
> چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔ مزید معلومات کے لیے https://en.wikipedia.org/wiki/Little_penguin ملاحظہ کریں۔
> **نوٹ** جیسا کہ آپ پڑھنے والے ہیں، آپ کو **کبھی بھی** لنکس نہیں بنانے چاہئیں جو اوپر کی طرح نظر آتے ہیں۔
> **نوٹ** جیسا کہ آپ پڑھنے والے ہیں، آپ کو **کبھی بھی** ایسے لنکس نہیں بنانے چاہئیں جو اوپر کی طرح نظر آئیں۔
یاد رکھیں، اسکرین ریڈرز براؤزرز سے مختلف انٹرفیس ہیں جن میں مختلف خصوصیات کا سیٹ ہوتا ہے۔
### URL استعمال کرنے کا مسئلہ
اسکرین ریڈرز متن کو پڑھتے ہیں۔ اگر متن میں URL ظاہر ہوتا ہے، تو اسکرین ریڈر URL کو پڑھے گا۔ عام طور پر، URL معنی خیز معلومات فراہم نہیں کرتا، اور پریشان کن لگ سکتا ہے۔ آپ نے یہ تجربہ کیا ہوگا اگر آپ کے فون نے کبھی کسی ٹیکسٹ میسج کو آواز کے ساتھ پڑھا ہو جس میں URL ہو۔
اسکرین ریڈرز متن کو پڑھتے ہیں۔ اگر متن میں URL ظاہر ہوتا ہے، تو اسکرین ریڈر URL کو پڑھے گا۔ عام طور پر، URL معنی خیز معلومات فراہم نہیں کرتا، اور پریشان کن لگ سکتا ہے۔ آپ نے یہ تجربہ کیا ہوگا اگر آپ کے فون نے کبھی کسی ٹیکسٹ میسج کو آواز کے ساتھ پڑھا ہو جس میں URL ہو۔
### "یہاں کلک کریں" کا مسئلہ
اسکرین ریڈرز کے پاس صرف صفحے پر موجود ہائپر لنکس کو پڑھنے کی صلاحیت بھی ہوتی ہے، بالکل اسی طرح جیسے کوئی دیکھنے والا شخص صفحے پر لنکس کو اسکین کرے گا۔ اگر لنک ٹیکسٹ ہمیشہ "یہاں کلک کریں" ہو، تو صارف صرف "یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، ..." سنے گا۔ اب تمام لنکس ایک دوسرے سے الگ نہیں ہیں۔
اسکرین ریڈرز کے پاس صفحے پر صرف ہائپر لنکس پڑھنے کی صلاحیت بھی ہوتی ہے، بالکل اسی طرح جیسے کوئی دیکھنے والا شخص لنکس کے لیے صفحے کو اسکین کرے گا۔ اگر لنک ٹیکسٹ ہمیشہ "یہاں کلک کریں" ہو، تو صارف صرف "یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، یہاں کلک کریں، ..." سنے گا۔ اب تمام لنکس ایک دوسرے سے الگ نہیں ہیں۔
### اچھا لنک ٹیکسٹ
اچھا لنک ٹیکسٹ مختصراً بیان کرتا ہے کہ لنک کے دوسری طرف کیا ہے۔ اوپر دیے گئے مثال میں چھوٹے پینگوئنز کے بارے میں بات کرتے ہوئے، لنک اس نسل کے بارے میں ویکیپیڈیا صفحے پر ہے۔ *چھوٹے پینگوئنز* کا فقرہ بہترین لنک ٹیکسٹ بنائے گا کیونکہ یہ واضح کرتا ہے کہ اگر کوئی لنک پر کلک کرے تو وہ کیا سیکھے گا - چھوٹے پینگوئنز۔
اچھا لنک ٹیکسٹ مختصراً بیان کرتا ہے کہ لنک کے دوسری طرف کیا ہے۔ اوپر دیے گئے مثال میں چھوٹے پینگوئنز کے بارے میں بات کرتے ہوئے، لنک اس نسل کے بارے میں ویکیپیڈیا صفحے پر ہے۔ *چھوٹے پینگوئنز* کا فقرہ بہترین لنک ٹیکسٹ کے لیے موزوں ہوگا کیونکہ یہ واضح کرتا ہے کہ اگر کوئی لنک پر کلک کرے تو وہ کیا سیکھے گا - چھوٹے پینگوئنز۔
> چھوٹا پینگوئن، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔ [چھوٹا پینگوئن](https://en.wikipedia.org/wiki/Little_penguin) مزید معلومات کے لیے۔
> [چھوٹا پینگوئن](https://en.wikipedia.org/wiki/Little_penguin)، جسے کبھی کبھی پری پینگوئن بھی کہا جاتا ہے، دنیا کا سب سے چھوٹا پینگوئن ہے۔
✅ چند منٹ کے لیے ویب پر سرف کریں اور ایسے صفحات تلاش کریں جو مبہم لنکنگ حکمت عملی استعمال کرتے ہیں۔ ان کا موازنہ دیگر، بہتر لنک شدہ سائٹس سے کریں۔ آپ کیا سیکھتے ہیں؟
#### سرچ انجن نوٹس
#### سرچ انجن کے نوٹس
سب کے لیے اپنی سائٹ کو قابل رسائی بنانے کو یقینی بنانے کے اضافی فائدے کے طور پر، آپ سرچ انجنز کو اپنی سائٹ پر نیویگیٹ کرنے میں بھی مدد کریں گے۔ سرچ انجنز لنک ٹیکسٹ کا استعمال صفحات کے موضوعات سیکھنے کے لیے کرتے ہیں۔ لہذا اچھا لنک ٹیکسٹ استعمال کرنا سب کے لیے مددگار ہے!
@ -132,7 +132,7 @@ CSS صفحے پر کسی بھی عنصر کی شکل پر مکمل کنٹرول
اس مثال میں، تفصیل اور آرڈر کے متن کو دہرانا براؤزر استعمال کرنے والے کے لیے معنی رکھتا ہے۔ تاہم، اسکرین ریڈر استعمال کرنے والے کو صرف *تفصیل* اور *آرڈر* کے الفاظ بغیر سیاق و سباق کے سنائی دیں گے۔
اس مثال میں، تفصیل اور آرڈر کے متن کو دہرانا براؤزر استعمال کرنے والے کے لیے معنی خیز ہے۔ تاہم، اسکرین ریڈر استعمال کرنے والے کو صرف *تفصیل* اور *آرڈر* کے الفاظ بغیر سیاق و سباق کے سنائی دیں گے۔
ایسے منظرناموں کی حمایت کرنے کے لیے، HTML ایک سیٹ کی خصوصیات کی حمایت کرتا ہے جسے [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) کہا جاتا ہے۔ یہ خصوصیات اسکرین ریڈرز کو اضافی معلومات فراہم کرنے کی اجازت دیتی ہیں۔
@ -144,7 +144,7 @@ CSS صفحے پر کسی بھی عنصر کی شکل پر مکمل کنٹرول
✅ عام طور پر، Semantic مارک اپ کا استعمال جیسا کہ اوپر بیان کیا گیا ہے ARIA کے استعمال پر فوقیت رکھتا ہے، لیکن کبھی کبھی مختلف HTML ویجٹس کے لیے کوئی سیمینٹک متبادل نہیں ہوتا۔ ایک اچھا مثال درخت ہے۔ درخت کے لیے کوئی HTML متبادل نہیں ہے، لہذا آپ اس عنصر کے لیے عمومی `<div>` کو مناسب رول اور ARIA ویلیوز کے ساتھ شناخت کرتے ہیں۔ [MDN کی ARIA پر دستاویزات](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) میں مزید مفید معلومات موجود ہیں۔
✅ عام طور پر، اوپر بیان کردہ سیمینٹک مارک اپ کا استعمال ARIA کے استعمال پر فوقیت رکھتا ہے، لیکن کبھی کبھی مختلف HTML ویجٹس کے لیے کوئی سیمینٹک متبادل نہیں ہوتا۔ ایک اچھا مثال درخت ہے۔ درخت کے لیے کوئی HTML متبادل نہیں ہے، لہذا آپ اس عنصر کے لیے عمومی `<div>` کو مناسب رول اور ARIA ویلیوز کے ساتھ شناخت کرتے ہیں۔ [MDN کی ARIA پر دستاویزات](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) میں مزید مفید معلومات موجود ہیں۔
```html
<h2id="tree-label">File Viewer</h2>
@ -156,20 +156,20 @@ CSS صفحے پر کسی بھی عنصر کی شکل پر مکمل کنٹرول
## تصاویر
یہ کہنا ضروری نہیں کہ اسکرین ریڈرز خود بخود یہ نہیں پڑھ سکتے کہ تصویر میں کیا ہے۔ تصاویر کو قابل رسائی بنانا زیادہ محنت نہیں لیتا - یہی `alt` وصف کے بارے میں ہے۔ تمام معنی خیز تصاویر کو یہ بیان کرنے کے لیے `alt` ہونا چاہیے کہ وہ کیا ہیں۔
وہ تصاویر جو صرف سجاوٹی ہیں، ان کے `alt` وصف کو خالی سٹرنگ پر سیٹ کیا جانا چاہیے: `alt=""`۔ یہ اسکرین ریڈرز کو غیر ضروری طور پر سجاوٹی تصویر کا اعلان کرنے سے روکتا ہے۔
جو تصاویر صرف سجاوٹی ہیں، ان کے `alt` وصف کو خالی سٹرنگ پر سیٹ کیا جانا چاہیے: `alt=""`۔ یہ اسکرین ریڈرز کو سجاوٹی تصویر کا غیر ضروری اعلان کرنے سے روکتا ہے۔
✅ جیسا کہ آپ توقع کرتے ہیں، سرچ انجنز بھی یہ نہیں سمجھ سکتے کہ تصویر میں کیا ہے۔ وہ بھی alt ٹیکسٹ کا استعمال کرتے ہیں۔ لہذا ایک بار پھر، اپنی صفحے کو قابل رسائی بنانا اضافی فوائد فراہم کرتا ہے!
✅ جیسا کہ آپ توقع کر سکتے ہیں، سرچ انجن بھی یہ نہیں سمجھ سکتے کہ تصویر میں کیا ہے۔ وہ بھی alt ٹیکسٹ کا استعمال کرتے ہیں۔ لہذا ایک بار پھر، اپنی صفحے کو قابل رسائی بنانا اضافی فوائد فراہم کرتا ہے!
## کی بورڈ
کچھ صارفین ماؤس یا ٹریک پیڈ استعمال کرنے سے قاصر ہوتے ہیں، بلکہ کی بورڈ کے تعاملات پر انحصار کرتے ہیں تاکہ ایک عنصر سے دوسرے عنصر تک ٹیب کر سکیں۔ یہ ضروری ہے کہ آپ کی ویب سائٹ آپ کے مواد کو منطقی ترتیب میں پیش کرے تاکہ کی بورڈ صارف دستاویز میں نیچے جاتے ہوئے ہر انٹرایکٹو عنصر تک رسائی حاصل کر سکے۔ اگر آپ اپنے ویب صفحات کو سیمینٹک مارک اپ کے ساتھ بناتے ہیں اور ان کے بصری لے آؤٹ کو اسٹائل کرنے کے لیے CSS کا استعمال کرتے ہیں، تو آپ کی سائٹ کی بورڈ نیویگیبل ہونی چاہیے، لیکن اس پہلو کو دستی طور پر جانچنا ضروری ہے۔ [کی بورڈ نیویگیشن کی حکمت عملیوں](https://webaim.org/techniques/keyboard/) کے بارے میں مزید جانیں۔
کچھ صارفین ماؤس یا ٹریک پیڈ استعمال کرنے سے قاصر ہوتے ہیں، بلکہ کی بورڈ کے تعاملات پر انحصار کرتے ہیں تاکہ ایک عنصر سے دوسرے عنصر تک ٹیب کریں۔ یہ ضروری ہے کہ آپ کی ویب سائٹ آپ کے مواد کو منطقی ترتیب میں پیش کرے تاکہ کی بورڈ صارف ہر انٹرایکٹو عنصر تک رسائی حاصل کر سکے جب وہ دستاویز میں نیچے جائیں۔ اگر آپ اپنے ویب صفحات کو سیمینٹک مارک اپ کے ساتھ بناتے ہیں اور ان کے بصری لے آؤٹ کو اسٹائل کرنے کے لیے CSS کا استعمال کرتے ہیں، تو آپ کی سائٹ کی بورڈ نیویگیبل ہونی چاہیے، لیکن اس پہلو کو دستی طور پر جانچنا ضروری ہے۔ [کی بورڈ نیویگیشن کی حکمت عملیوں](https://webaim.org/techniques/keyboard/) کے بارے میں مزید جانیں۔
✅ کسی بھی ویب سائٹ پر جائیں اور صرف اپنے کی بورڈ کا استعمال کرتے ہوئے اس کے ذریعے نیویگیٹ کرنے کی کوشش کریں۔ کیا کام کرتا ہے، کیا کام نہیں کرتا؟ کیوں؟
## خلاصہ
ایک ویب جو کچھ کے لیے قابل رسائی ہے، وہ واقعی 'ورلڈ وائ
بہت سی حکومتوں کے پاس رسائی کے تقاضوں سے متعلق قوانین موجود ہیں۔ اپنے ملک کے رسائی کے قوانین کے بارے میں پڑھیں۔ کیا شامل ہے، اور کیا نہیں؟ ایک مثال [یہ حکومتی ویب سائٹ](https://accessibility.blog.gov.uk/) ہے۔
ایک ویب جو
بہت سی حکومتوں نے رسائی کے تقاضوں کے حوالے سے قوانین بنائے ہیں۔ اپنے ملک کے رسائی کے قوانین کے بارے میں معلومات حاصل کریں۔ کیا شامل ہے اور کیا نہیں؟ ایک مثال [یہ حکومتی ویب سائٹ](https://accessibility.blog.gov.uk/) ہے۔
leestott
1 week ago
committed by
GitHub