Сложные изображения: диаграммы, карты и подробные описания
Работайте с изображениями, которым недостаточно короткой фразы
«Сложные изображения: диаграммы, карты и подробные описания» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Когда alt недостаточно
Некоторые изображения содержат слишком много информации для короткой фразы. Для графиков, карт и схем нужен план более подробного описания.
Начните с короткого alt
Даже для сложного изображения используется краткий alt с его названием, например «столбчатая диаграмма ежемесячных продаж за 2024 год».
<img src="chart.png" alt="Bar chart of monthly sales for 2024">Добавьте подробности
Краткий текст alt называет изображение, а расположенное рядом подробное описание передаёт фактические данные или взаимосвязи, которые оно показывает.
Опишите основную мысль
Хорошее подробное описание передаёт главный вывод — например, что продажи достигли пика в декабре, — а не содержит сухой список всех значений.
Таблица данных как запасной вариант
Для диаграмм лучшей альтернативой часто становится настоящая HTML-таблица с теми же числами сразу под изображением.
Ссылка на описание
Вы можете разместить подробное описание на странице и связать его с изображением с помощью aria-describedby, указав идентификатор его элемента.
<img src="map.png" alt="Store map" aria-describedby="mapdesc">Figure и figcaption
Оберните изображение и его видимое пояснение в figure и figcaption, чтобы их связь была понятна всем.
<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>Для карт нужны данные
Изображение карты бесполезно без лежащих в её основе фактов, поэтому предоставьте в качестве текстового эквивалента адрес, маршрут или список.
Диаграммы и последовательности
Для блок-схемы опишите шаги и их порядок словами, чтобы логика сохранялась даже без визуальной структуры.
Сделайте описание доступным для поиска
Убедитесь, что подробное описание легко найти. Скрытый текстовый эквивалент, до которого пользователи не могут добраться, совершенно бесполезен.
Соотнесите объём с уровнем сложности
Чем содержательнее изображение, тем больше информации должен передавать его текстовый эквивалент. Пусть сложность изображения определяет объём описания.
Быстрая проверка
Выберите лучший план для сложной диаграммы.
Итоги
Готово! Для сложных изображений нужен краткий alt и полноценный текстовый эквивалент, таблица данных, figcaption или aria-describedby, передающие основную мысль.
Часто задаваемые вопросы
Урок «Сложные изображения: диаграммы, карты и подробные описания» бесплатный?
Да — полный текст урока «Сложные изображения: диаграммы, карты и подробные описания» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сложные изображения: диаграммы, карты и подробные описания»?
Работайте с изображениями, которым недостаточно короткой фразы Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сложные изображения: диаграммы, карты и подробные описания»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Информативное или декоративное: первое решение
- Написание alt, передающего назначение, а не пиксели
- Пустой alt и скрытое декоративное изображение
- Сложные изображения: диаграммы, карты и подробные описания