3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d774c367417b2b2512a9d | Know When Alt Text Should be Left Blank | 0 | معرفة متى يجب ترك النص البديل فارغًا |
Description
alt
على علامات img إلزامي. ومع ذلك ، في بعض الأحيان يتم تجميع الصور مع تسمية توضيحية تشرحها بالفعل ، أو يتم استخدامها للزينة فقط. في هذه الحالات قد يبدو النص alt
زائدا أو غير ضروري. في الحالات التي تكون فيها الصورة مفسّرة بالفعل بمحتوى نصي ، أو لا تضيف معنى إلى صفحة ما ، فإن img
لا تزال بحاجة إلى سمة alt
، ولكن يمكن ضبطها على سلسلة فارغة. إليك مثال على ذلك: <img src="visualDecoration.jpeg" alt="">
عادةً ما تقع صور الخلفية تحت التصنيف "الزخرفي" أيضًا. ومع ذلك ، يتم تطبيقها عادةً مع قواعد CSS ، وبالتالي فهي ليست جزءًا من عملية قراءة برامج الترميز. ملحوظة بالنسبة للصور التي تحتوي على تسمية توضيحية ، قد تحتاج إلى تضمين نص
alt
، لأنه يساعد محركات البحث على فهرسة محتوى الصورة. Instructions
alt
لعلامة img
واضبطها على سلسلة فارغة. (لاحظ أن الصورة src
لا ترتبط بملف فعلي - لا تقلق أنه لا توجد سيوف تظهر في الشاشة.) Tests
tests:
- text: يجب أن تحتوي علامة <code>img</code> سمة <code>alt</code> .
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
- text: يجب تعيين سمة <code>alt</code> لسلسلة فارغة.
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
Challenge Seed
<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
<p>To Come...</p>
</article>
<img src="samuraiSwords.jpeg">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
Solution
// solution required