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

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

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
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‏ "home" تؤدي في الواقع إلى توفير تجربة أكثر إرباكًا. ويواجه المستخدم المبصر التحدي نفسه الذي يواجهه مستخدم قارئ الشاشة، وهو معرفة أثر النقر على شعار الموقع الإلكتروني.

من ناحية أخرى، لا يكون وصف الصورة مفيدًا دائمًا. على سبيل المثال، يمكنك استخدام صورة عدسة مكبرة داخل زر بحث يتضمّن النص "بحث". إذا لم يكن النص متوفّرًا، يمكنك بالتأكيد منح هذه الصورة قيمة alt "بحث". ولكن بما أنّنا نملك النص المرئي، سيلتقط قارئ الشاشة الكلمة "بحث" ويقرأها بصوت عالٍ، وبالتالي فإنّ قيمة alt المتطابقة على الصورة زائدة.

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

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

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