Информативное или декоративное: первое решение
Определяйте, нужно ли изображению текстовое описание
«Информативное или декоративное: первое решение» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Первый вопрос
Прежде чем написать хоть одно слово альтернативного текста, задайте себе один вопрос: добавляет ли это изображение смысл или оно просто украшает страницу?
Две категории
Каждое изображение относится к одной из двух категорий: информативные изображения передают содержание, а декоративные служат лишь визуальным оформлением.
Что значит «информативное»
Информативное изображение сообщает пользователю то, что он упустил бы без него, например данные графика, фотография товара или логотип с названием компании.
Что значит «декоративное»
Декоративное изображение не добавляет информации. Например, это могут быть фоновые завитки, разделительные линии или стоковая фотография, создающая определённое настроение.
Почему это решение важно
Правильная классификация важна, потому что ошибочное решение либо скрывает настоящее содержимое, либо перегружает пользователей программ чтения с экрана бесполезным шумом.
Информативному изображению нужны слова
Если изображение информативное, добавьте настоящий альтернативный текст alt, передающий его смысл в данном контексте.
<img src="sales-up.png" alt="Sales rose 40 percent in March">Декоративному изображению нужна пустота
Если изображение декоративное, задайте ему пустой alt, чтобы программы чтения с экрана сразу его пропускали.
<img src="divider.png" alt="">Одно изображение — две роли
Одна и та же фотография может быть информативной на одной странице и декоративной на другой. Роль определяет контекст, а не сам файл.
Полезная проверка
Попробуйте ответить на вопрос: потеряла бы страница смысл, если удалить изображение? Если да, оно информативное. Если нет — декоративное.
Никогда не пропускайте alt
Полностью пропустить атрибут alt — худший вариант: многие программы чтения с экрана тогда произносят имя файла.
Сначала примите решение
Итак, ваш рабочий процесс начинается здесь: до выбора формулировки классифицируйте каждое изображение как информативное или декоративное.
Быстрая проверка
Пора проверить основное решение.
Итоги
Отличная работа! Каждое изображение информативное или декоративное, решение зависит от контекста, а от этого выбора зависит, напишете ли вы альтернативный текст alt или оставите его пустым.
Часто задаваемые вопросы
Урок «Информативное или декоративное: первое решение» бесплатный?
Да — полный текст урока «Информативное или декоративное: первое решение» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Информативное или декоративное: первое решение»?
Определяйте, нужно ли изображению текстовое описание Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Информативное или декоративное: первое решение»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Информативное или декоративное: первое решение
- Написание alt, передающего назначение, а не пиксели
- Пустой alt и скрытое декоративное изображение
- Сложные изображения: диаграммы, карты и подробные описания