Вывод
Данный текст содержит описания трех различных картинок, которые были использованы в проверочной работе по английскому языку для учащихся седьмого класса. Каждая картинка описывает различные сцены, отображающие повседневные ситуации. Данный материал может быть полезен для подготовки к подобным экзаменам или проверочным работам, помогая учащимся лучше понять требования к заданиям и развивая навыки понимания текста.
Расшифровка изображений: как осуществлять доступ к контенту
Картинки — это один из самых популярных типов контента в интернете. Однако как и любое другое содержимое на веб-страницах, они должны быть доступны для всех пользователей, включая тех, кто пользуется скринридерами, управляет интерфейсом голосом или отключает картинки для экономии трафика. Кроме того, не стоит забывать и о поисковых роботах 🤖
Важность альтернативного текста для картинок
Чтобы сделать изображение доступным, к нему должен быть добавлен альтернативный текст (alt text). В некоторых случаях также целесообразно добавить подпись и подробное описание к картинке.
Примеры декодирования изображений:
- Описание тематики фото: посмотрите на тему, указанную над изображением.
- Детальное рассмотрение: проанализируйте содержание фотографии.
- Знакомство с объектом: определите, что находится на изображении (комната, спортивный зал, картинная галерея и т.д.).
- Участники сцены: кто изображён на фотографии (дети, взрослые, спортсмены и т.д.).
- Действия участников: что именно представлено на снимке (играют, катаются, рассматривают, смотрят и т.д.)?
- Эмоции и настроение: какие эмоции испытывают участники (радость, увлечение и пр.)?
- Одежда и атрибуты: как одеты участники (школьная форма, праздничная одежда и т.п.)?
- Общее впечатление: почему это фото вам нравится (выражение настроения, чувства и пр.)?
Виды изображений
Все изображения можно разделить на две основные категории: смысловые и декоративные.
Смысловые изображения
Они дополняют текст и другой контент, делая его более понятным и привлекательным. Обычно такие картинки размещаются внутри текста или рядом с видео и аудио материалами. Примеры таких изображений: фото вашего питомца, иллюстрации книг в статьях, иконки без текста и скриншоты сайтов.
Декоративные изображения
Они используются для придания странице красочности и привлекательности, не несут смысловой нагрузки. Удаление декоративных изображений не изменит содержания, но повлияет на дизайн страницы. Примерами таких изображений могут служить виньетки, фото для привлечения внимания, декоративные элементы и аватары.
Помните, что для различения между информативными и декоративными изображениями ответьте на следующий вопрос: Важно ли наличие изображения для понимания содержания?. Если ответ утвердительный, то это информативная картинка, которую стоит описать. В случае отрицательного ответа – это декоративное изображение и его описание не требуется.
Правила описания декоративных картинок
Не забывайте про атрибут alt для декоративных изображений. Если он отсутствует, скринридеры попытаются прочитать путь к файлу из атрибута src. Обязательно укажите в alt тексте информацию о том, что изображено на картинке. Также следите за пробелами и символами неразрывного пробела в alt, чтобы избежать некорректного озвучивания скринридерами.
Декоративные картинки
Декоративные картинки часто используются в блоках с описанием преимуществ сервисов, как в этом примере. Оставьте alt пустым.
Открыть демо в новой вкладке
Картинки, которые уже подробно описаны на странице, тоже считаются декоративными. В их случае дополнительно описывать их в alt избыточно.
Часто картинки добавляют в ссылки и располагают их рядом с текстом, чтобы расширить область клика. В этом случае это декоративная картинка и её не надо описывать. Оставьте alt пустым.
Ещё можете добавить декоративную картинку на фон страницы или блока с помощью CSS-свойства background-image. Тогда скринридеры просто не узнают о том, что на странице есть графика.
Смысловые картинки
Хорошо описать картинку не всегда просто. В каких-то случаях — это целое искусство. К примеру, сложно описать картинку с мемом так, чтобы сохранить шутку, но при этом рассказать, что на ней.
Чтобы понять, как правильно описать картинку, ответьте себе на несколько вопросов:
Если можете представить себе картинку, когда прочитали её описание, это хорошее описание.
Альтернативное описание не должно быть слишком длинным и сложным. Нет оптимального количества символов, но можете встретить рекомендацию про 125 знаков. Дело в том, что JAWS разбивает одно описание на несколько, если в нём больше 125 символов. Однако ни один скринридер не обрезает текст.
На описание также влияет контекст. Например, одну и ту же картинку можно описать по-разному в зависимости от того, где она находится. Это важно учитывать.
В описаниях можно описывать цвета, если они имеют значение или вам важно рассказать про них. Это заблуждение, что цвет ни о чём не скажет человеку со слепотой.
Когда на картинке очень много всего, лучше использовать вместо альтернативного описания расширенное. Особенно если это код, математические выражения или графики.
Если хотите, можете ставить точку в конце альтернативного описания. Так, если за картинкой есть другой текст, скринридеры сделают небольшую паузу между двумя объявлениями.
Можете найти много примеров описания картинок на сайте музея дизайна Купер Хьюитт.
Информативные картинки
Для информативных картинок важен контекст. Какой вокруг них текст и что хотите передать с помощью графики. Это могут быть эмоции или факты.
Представим, что в кулинарном блоге есть пост про историю пончиков с фотографиями. В этом случае картинки дополняют текст и показывают пончики более наглядно. В этом случае опишите содержимое картинки в alt.
alt=Американские кольцевые пончики. Один с голубой глазурью и синей, голубой, красной, жёлтой посыпкой в форме вермишели и шариков. Другой — с розовой глазурью и такой же разноцветной Американские кольцевые пончики. Один с голубой глазурью и синей, голубой, красной, жёлтой посыпкой в форме вермишели и шариков. Другой — с розовой глазурью и такой же разноцветной посыпкой.
Если картинка не загрузится, все пользователи смогут представить, что на ней.
Давайте попробуем описать портрет пользователя в его профиле. В этом случае кратко расскажите, как выглядит человек.
Девушка в стильной одежде
Девушка с тёмно-каштановыми кудрявыми волосами наклонила голову, придерживает её рукой и смотрит в камеру. У неё овальное лицо, карие глаза, прямой нос и широкие каштановые брови. Она одета в коралловую дублёнку с подвёрнутыми рукавами, чёрно-белую футболку с буквами и полосками и чёрный чокер.
Если это фотография с вами, можете добавить больше эмоций и рассказать о важных для вас особенностях внешности. Если вы икона стиля, то опишите подробнее одежду 👨🎤 Контекст всё решает!
Картинки с текстом
Теперь разберёмся с картинками с текстом. Когда это небольшой текст, просто перепишите его в alt.
Чаще всего картинки с текстом встречаются в логотипах. В этом случае перепишите текст с логотипа в alt, если рядом нет названия компании в виде текста.
Если на картинке большой текст, лучше добавить его на страницу и вообще не использовать картинку. Текст на картинках трудно читать всем пользователям, особенно если её приблизить на смартфоне.
Комплексные картинки
Для комплексных картинок лучше добавлять подробное описание, а alt использовать для краткой подписи.
Чаще всего комплексными бывают графики и скриншоты. Из-за того, что на них много информации, бывает сложно всё уместить в альтернативном описании.
Представим, что хотите показать коллеге, что на сайте с дудлами Google есть проблемы с контрастностью. Вы делаете скриншот с открытым инструментом разработчика в Chrome и курсором на проблемной строчке текста.
Чтобы правильно описать скриншот, надо понять контекст. В этом случае важно рассказать именно про эту строчку текста, так что не описывайте другое содержимое страницы. Ещё можно дать подсказку, где найти подробное описание. В примере это предложение Подробнее в описании после скриншота.
Если хотите программно связать подробное описание с картинкой, то тут пригодятся aria-describedby или aria-details.
aria-describedby помогает связать на одной странице описание и элемент, к которому оно относится.
aria-details связывает один элемент с дополнительной подробной информацией о нём. При этом эта информация может быть вообще на другой странице по ссылке. К сожалению, aria-details пока не очень хорошо поддерживается скринридерами.
Внешне ничего не изменится, но скринридеры будут зачитывать дополнительное описание к картинке автоматически после альтернативного.
Групповые картинки
Особенность групповых картинок в том, что они связаны между собой. Поэтому у них должна быть общая подпись. При этом у отдельных картинок в группе могут быть и отдельные альтернативные описания.
Что делать, когда надо описать скриншот с несколькими картинками? Добавьте к нему подробное описание до или перед картинкой, а alt используйте для краткой подписи и указания на описание.
Функциональные картинки
Главное правило для подписей у кнопок и ссылок — быть кратким. Не нужно пытаться описать то, как выглядит иконка или логотип. Описание ссылок должно рассказывать, куда ведёт ссылка, а кнопок — что она делает.
К примеру, опишем ссылку с логотипом, которая ведёт на главную страницу.
Обратите внимание, что альтернативный текст в этом случае — название страницы, а не «Логотип компании». Ссылка со словом «логотип» не описывает, куда в итоге попадут пользователи.
Если это ссылка с логотипом, которая ведёт на сайт этой компании, лучше использовать в alt название компании.
В примере мы описали функцию кнопки — «Заказать доставку». Старайтесь укладывать в пару слов, когда описываете, для чего нужна кнопка.
Подробнее про класс узнаете из «Как скрыть содержимое от скринридеров».
Эксперты по доступности часто советуют использовать хак с визуально скрытым текстом. aria-label не всегда переводится сервисами для автоматического перевода, а ещё можно забыть перевести содержимое атрибута вручную.
Эмодзи и эмотиконы
Эмодзи — это тоже в каком-то смысле картинки.
Скринридеры интересно взаимодействуют с эмодзи. Они используют те подписи, которые хранятся в специальных таблицах символов операционных систем. Поэтому вспомогательные технологии могут объявлять одно и то же эмодзи по разному в зависимости от системы. Например, эмодзи с красным флагом не везде красный флаг!
Если критически важно, чтобы все скринридеры одинаково зачитывали эмодзи, можно использовать хак с ролью img и aria-label.
Для эмотиконов можно использовать такую же технику с role="img" и aria-label.
Распространённые ошибки
Сначала определите, что это за картинка: декоративная (для красоты) или смысловая (с текстом, функциональная, для понимания содержимого).