3.2 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d774c367417b2b2512a9d | Коли потрібно залишити атрибут alt текст порожнім | 0 | https://scrimba.com/c/cM9P4t2 | 301019 | know-when-alt-text-should-be-left-blank |
--description--
Під час останнього завдання ви вивчили, що включати атрибут alt при використанні тегу img є обов'язковим. Хоча інколи фото можуть бути згрупованими з уже існуючим описом або використовуються лише для декорації. У таких випадках текст alt буде зайвим та необов'язковим.
Якщо до зображення вже існує текстовий вміст або зображення не має значення для сторінки, img все ще потребує атрибут alt, але його можна встановити як порожній рядок. Наприклад:
<img src="visualDecoration.jpeg" alt="">
Фонові зображення також підпадають під мітку "декоративні". Однак вони зазвичай застосовуються з правилами CSS, і тому не є частиною процесу читання з екрану.
Примітка: Для зображень із підписом ви все одно можете додати alt текст, оскільки це допомагає пошуковим системам класифікувати вміст зображення.
--instructions--
Camper Cat закодували макет сторінки для розділу блогу на своєму вебсайті. Вони планують додати візуальний розрив між двома статтями з декоративним зображенням самурайського меча. Додайте атрибут alt до тегу img і присвойте йому порожній рядок. (Зверніть увагу, що зображення src не посилається на фактичний файл — не хвилюйтесь, що на дисплеї не відображаються мечі.)
--hints--
Ваш тег img має містити атрибут alt.
assert(!($('img').attr('alt') == undefined));
Атрибуту alt має бути призначений порожній рядок.
assert($('img').attr('alt') == '');
--seed--
--seed-contents--
<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>
--solutions--
<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" alt="">
<article>
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>