استخدام سمة النص البديل لتوفير بدائل نصية للصور
الصور هي عنصر مهم في معظم صفحات الويب، وهي بالطبع نقطة شائكة للمستخدمين الذين يعانون من ضعف في النظر. يجب أن نأخذ في الاعتبار الدور الذي تلعبه الصورة في الصفحة لمعرفة نوع النص البديل الذي ينبغي أن يكون لها. ألقِ نظرة على هذه الصورة.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
دراسة تُظهر 9 من 10 قطط بهدوء أثناء الحكم على أصحابها أثناء نومهم
لدينا في الصفحة صورة لقطّة توضّح مقالة عن السلوك الصادر عن القطط. سيعلن قارئ الشاشة عن هذه الصورة
باستخدام اسمها الحرفي، "/160204193356-01-cat-500.jpg". هذا دقيق، لكنه ليس
مفيدًا على الإطلاق.
يمكنك استخدام السمة alt لتوفير بديل نصي مفيد لهذه الصورة،
على سبيل المثال "قطة تحدّق في الفضاء بحذر شديد".
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
ثم يمكن لقارئ الشاشة الإعلان عن وصف موجز للصورة ( يظهر في شريط VoiceOver باللون الأسود) ويمكن للمستخدم اختيار ما إذا كان يريد الانتقال إلى المقالة أم لا.
بعض التعليقات حول alt:
- تسمح لك علامة
altبتحديد سلسلة بسيطة لاستخدامها في أي وقت لا تكون فيه الصورة متاحة، على سبيل المثال، عند تعذُّر تحميل الصورة أو عند الوصول إليها من خلال برنامج تتبُّع زحف الويب أو عندما يصادفها قارئ شاشة. - تختلف
altعنtitle، أو أي نوع من الشرح، حيث يتم استخدامها فقط إذا لم تكن الصورة متاحة.
تعد كتابة نص بديل مفيد نوعًا ما من الفن. لكي تكون السلسلة بديلاً نصيًا قابلاً للاستخدام، يجب أن تنقل نفس المفهوم مثل الصورة، في نفس السياق.
فكّر في استخدام صورة شعار مرتبطة في إعلان التسمية الرئيسية لصفحة مثل تلك المعروضة أعلاه. ويمكننا وصف الصورة بدقة تامة باعتبارها "شعار Funion".
<img class="logo" src="logo.jpg" alt="The Funion logo">
قد يكون من المغري إعطائه بديلاً نصيًا أبسط لـ "الصفحة الرئيسية" أو "الصفحة الرئيسية"، ولكن ذلك يضر بكل من ضعاف البصر والمستخدمين المبصرين.
لكن تخيل مستخدم قارئ الشاشة الذي يريد تحديد موقع شعار التسمية الرئيسية على الصفحة، فمنحه قيمة بديلة "للصفحة الرئيسية" يخلق تجربة أكثر ارتباكًا. ويواجه المستخدم المبصر التحدي نفسه - اكتشاف تأثير النقر على شعار الموقع - كمستخدم لقارئ الشاشة.
من ناحية أخرى، ليس من المفيد دائمًا وصف الصورة. على سبيل المثال، ضع في اعتبارك صورة عدسة مكبرة داخل زر بحث يحتوي على النص
"Search". إذا لم يكن النص موجودًا، فمن المؤكد أنك ستعطي تلك الصورة
قيمة بديلة لـ "بحث". وبما أنّ لدينا النص المرئي، سيلتقط قارئ الشاشة كلمة "بحث"
ويقرأها بصوت عالٍ، وبالتالي، تُعدّ قيمة alt متطابقة على
الصورة مكرّرة.
في المقابل، ندرك أنّ الجزء الذي لا يتضمّن النص alt، سنسمع على الأرجح
اسم ملف الصورة بدلاً من هذا، وبالتالي هذا الإجراء غير مفيد ويُحتمل أن يكون مُربكًا. في
هذه الحالة، يمكنك استخدام سمة alt فارغة، وسيتخطّى قارئ الشاشة
الصورة تمامًا.
<img src="magnifying-glass.jpg" alt="">
باختصار، يجب أن تتضمّن جميع الصور السمة alt، ولكن ليس من الضروري أن تحتوي جميعها على نص. يجب أن تحتوي الصور المهمة على نص بديل وصفي يصف
بإيجاز ماهية الصورة، في حين يجب أن تحتوي الصور الزخرفية على سمات نص بديل فارغة،
أي alt="".