Files
freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md

3.0 KiB
Raw Blame History

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">