3.6 KiB
3.6 KiB
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
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