freeCodeCamp

2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9c	Add a Text Alternative to Images for Visually Impaired Accessibility	0		إضافة نص بديل للصور لذوي ضعاف البصر

Description

من المحتمل أنك رأيت سمة alt على علامة img في تحديات أخرى. يصف النص Alt محتوى الصورة ويوفر بديلًا نصيًا. يساعد ذلك في حالة فشل تحميل أو عدم تمكن المستخدم من رؤية الصورة. ويستخدم أيضًا من قِبل محركات البحث لفهم ما تحتويه الصورة لتضمينها في نتائج البحث. في ما يلي مثال: <img src="importantLogo.jpeg" alt="Company logo"> يعتمد الأشخاص الذين يعانون من إعاقات بصرية على قارئي الشاشة لتحويل محتوى الويب إلى واجهة صوتية. لن يحصلوا على المعلومات إذا تم تقديمها فقط بصريًا. بالنسبة للصور ، يمكن لقارئي الشاشة الوصول إلى سمة alt وقراءة محتوياتها لتقديم المعلومات الأساسية. النص alt الجيد قصير ولكن وصفي ، ويقصد به أن ينقل بإيجاز معنى الصورة. يجب عليك دائمًا تضمين سمة alt على صورتك. وفقًا لمواصفات HTML5 ، يعتبر هذا الآن إلزاميًا.

Instructions

كامبر كات هو عبارة عن نينجا مشفر ونينجا فعليين ، ويقوم ببناء موقع ويب لتبادل معرفته. تظهر صورة الملف الشخصي التي يريد استخدامها مهاراته ، ويجب أن تحظى بتقدير جميع زائري الموقع. إضافة سمة alt في علامة img ، التي تشرح كامبر كات تقوم بالكاراتيه. (لا ترتبط الصورة src بملف فعلي ، لذلك يجب أن ترى النص alt في الشاشة.)

Tests

tests:
  - text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> ، ويجب ألا تكون فارغة.
    testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'

Challenge Seed

<img src="doingKarateWow.jpeg">

Solution

// solution required

2.8 KiB Raw Blame History