3.0 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d774c367417b2b2512a9c | Додайте альтернативний текст до зображень для людей з вадами зору | 0 | https://scrimba.com/c/cPp7VfD | 16628 | add-a-text-alternative-to-images-for-visually-impaired-accessibility |
--description--
Цілком імовірно, що ви бачили атрибут alt
тегу img
в інших завданнях. Текст атрибуту alt
описує вміст зображення та забезпечує його текстовий замінник. Атрибут alt
допомагає у випадках, коли зображення не завантажується, або яке користувач не бачить. Пошукові системи також використовують його, щоб визначити вміст зображення та включити його в результати пошуку. Наприклад:
<img src="importantLogo.jpeg" alt="Company logo">
Люди з вадами зору використовують зчитувачі екрану, що перетворюють контент сайту в аудіо формат. Вони не отримають інформацію, якщо вона подана тільки візуально. Що стосується зображень, програма зчитування з екрану може мати доступ до атрибуту alt
і зчитувати їхній вміст, щоб передати ключову інформацію.
Якісний текст атрибуту alt
надає програмі зчитування з екрану короткий опис зображення. Завжди додавайте атрибут alt
до вашого зображення. Згідно зі специфікаціями HTML5, наразі це вважається обов'язковим.
--instructions--
Кіт Кампер є одночасно ніндзя-кодувальником і справжнім ніндзя, який створює сайт, щоб поділитися знаннями. Фото профілю, яке він використовує, відображає його навички, тож усім відвідувачам сайту слід його цінувати. Додайте атрибут alt
в тег img
, який пояснює, що Кіт Кампер займається карате. (Зображення src
не має посилання на існуючий файл, тож ви маєте побачити текст alt
на дисплеї.)
--hints--
Ваш теґ img
повинен містити атрибут alt
і не має бути порожнім.
assert($('img').attr('alt'));
--seed--
--seed-contents--
<img src="doingKarateWow.jpeg">
--solutions--
<img src="doingKarateWow.jpeg" alt="Someone doing karate">