بدائل النص للصور

استخدام سمة النص البديل لتقديم بدائل نصية للصور

Alice Boxhall

Dave Gash

Meggin Kearney

تشكّل الصور عنصرًا مهمًا في معظم صفحات الويب، وهي بالطبع نقطة شائكة خاصة للمستخدمين الذين يعانون من ضعف البصر. يجب أن نأخذ في الاعتبار الدور الذي تلعبه الصورة في الصفحة لمعرفة نوع النص البديل الذي يجب أن يكون لها. ألقِ نظرة على هذه الصورة.

<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 "بحث". ولكن بما أنّنا نملك النص المرئي، سيلتقط قارئ الشاشة الكلمة "بحث" ويقرأها بصوت عالٍ، وبالتالي فإنّ قيمة alt المتطابقة على الصورة زائدة.

ومع ذلك، نعلم أنّه في حال حذف نص alt، من المحتمل أن نسمع اسمملف الصورة بدلاً من ذلك، ما قد يكون غير مفيد ومُربكًا في الوقت نفسه. في هذه الحالة، يمكنك استخدام سمة alt فارغة فقط، وسيتخطّى قارئ الشاشة الصورة بالكامل.

<img src="magnifying-glass.jpg" alt="">

باختصار، يجب أن تتضمّن كل الصور السمة alt، ولكن يجب ألّا تحتوي جميعها على نص. يجب أن تتضمّن الصور المهمة نصًا بديلاً وصفيًا يصف بإيجاز محتوى الصورة، في حين يجب أن تتضمّن الصور الزخرفية سمات alt فارغة، أي alt="".