freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-i...

3.6 KiB
Raw Blame History

id title challengeType videoUrl guideUrl localeTitle
587d774c367417b2b2512a9c Add a Text Alternative to Images for Visually Impaired Accessibility 0 https://russian.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

Camper Cat будучи не только ниндзей кодирования, но и настояющим ниндзя, создает веб-сайт, чтобы поделиться своими знаниями. Изображение профиля, которое он хочет использовать, показывает его навыки и должно быть оценено всеми посетителями сайта. Добавьте атрибут alt в тег img, который объясняет, что Camper Cat занимается каратэ. (Изображение 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