2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | guideUrl | localeTitle |
---|---|---|---|---|---|
587d774c367417b2b2512a9c | Add a Text Alternative to Images for Visually Impaired Accessibility | 0 | https://arabic.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility | إضافة بديل نص إلى الصور لإعاقة الوصول بصريًا |
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