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

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

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" a>lt="The Funion logo"

قد يكون من المغري تقديم نص بديل أبسط مثل "الصفحة الرئيسية" أو "الصفحة الرئيسية"، ولكنّ ذلك يضرّ بالمستخدمين الذين يعانون من ضعف في البصر والمستخدمين الذين لديهم بصر سليم.

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

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

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

<img src="magnifying-glass.jpg&qu>ot; alt=""

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