Files
freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.russian.md
2019-04-25 00:25:54 -07:00

6.9 KiB
Raw Blame History

id, title, challengeType, videoUrl, localeTitle
id title challengeType videoUrl localeTitle
587d774c367417b2b2512a9c Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения 0 Добавьте текстовое описание для изображений, чтобы увеличить их информативность для пользователей с нарушением зрения

Description (Описание)

Вероятно, вы уже встречали атрибут alt в теге img в других задачах. Alt описывает содержимое изображения при помощи текстовой альтернативы. Текстовая альтернатива - тот текст, который увидит пользователь в том случае, если изображение не загружается, не может быть отображено, или пользователь с ограниченными возможностями не способен его увидеть. Поисковые системы также используют этот альтернативный текст в качестве описания изображения, чтобы включить изображение в результаты поиска. Например: <img src="importantLogo.jpeg" alt="Company logo"> Люди с нарушениями зрения полагаются на устройства чтения с экрана для преобразования веб-контента в аудиоинтерфейс. Они не могут получить информацию, которая представлена только в виде изображения, если это изображение не сопровождается описанием(текстовой альтернативой). Программы, предназначенные для людей с нарушениями зрения, могут получить доступ к атрибуту alt и прочитать его содержимое для доставки пользователю ключевой информации. Хорошее описание alt должно быть кратким, но достаточно емким, чтобы передать смысл изображения. Спецификация HTML5 требует обязательного включения атрибута alt для каждого изображения.

Instructions (Задание)

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

// здесь должно быть ваше решение