استخدام سمة النص البديل لتقديم بدائل نصية للصور
تشكّل الصور عنصرًا مهمًا في معظم صفحات الويب، وهي بالطبع نقطة شائكة خاصة للمستخدمين الذين يعانون من ضعف البصر. يجب أن نأخذ في الاعتبار الدور الذي تلعبه الصورة في الصفحة لمعرفة نوع النص البديل الذي يجب أن يتضمّنه. ألقِ نظرة على هذه الصورة.
<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">
قد يكون من المغري تقديم نص بديل أبسط مثل "الصفحة الرئيسية" أو "الصفحة الرئيسية"، ولكنّ ذلك يضرّ بالمستخدمين الذين يعانون من ضعف البصر وكذلك المستخدمين الذين لديهم بصر سليم.
ولكن تخيل مستخدم قارئ شاشة يريد تحديد موقع الشعار الرئيسي في الصفحة، فإنّ منح قيمة alt "home" تؤدي في الواقع إلى توفير تجربة أكثر إرباكًا. ويواجه المستخدم المبصر التحدي نفسه الذي يواجهه مستخدم قارئ الشاشة، وهو معرفة أثر النقر على شعار الموقع الإلكتروني.
من ناحية أخرى، لا يكون وصف الصورة مفيدًا دائمًا. على سبيل المثال،
يمكنك استخدام صورة عدسة مكبرة داخل زر بحث يتضمّن النص
"بحث". إذا لم يكن النص متوفّرًا، يمكنك بالتأكيد منح هذه الصورة قيمة alt
"بحث". ولكن بما أنّنا نملك النص المرئي، سيلتقط قارئ الشاشة
الكلمة "بحث" ويقرأها بصوت عالٍ، وبالتالي فإنّ قيمة alt
المتطابقة على
الصورة زائدة.
ومع ذلك، نعلم أنّه في حال حذف نص alt
، من المحتمل أن نسمع اسمملف
الصورة بدلاً من ذلك، ما قد يكون غير مجدٍ ومُربكًا في الوقت نفسه. في
هذه الحالة، يمكنك استخدام سمة alt
فارغة فقط، وسيتخطّى قارئ الشاشة
الصورة بالكامل.
<img src="magnifying-glass.jpg" alt="">
باختصار، يجب أن تحتوي جميع الصور على سمة alt
، ولكن ليس من الضروري أن تحتوي كلّها
على نص. يجب أن تتضمّن الصور المهمة نصًا بديلاً وصفيًا يصف
بإيجاز محتوى الصورة، في حين يجب أن تتضمّن الصور الزخرفية سمات alt
فارغة، أي alt=""
.