Декоративные изображения: Как отличить контентное изображение от декоративного — журнал «Доктайп»

Как отличить контентное изображение от декоративного — журнал «Доктайп»

Давайте разберёмся, что такое контентное изображение, что такое декоративное и как их отличить друг от друга. От типа изображения зависит то, как оно будет добавлено на страницу.

Теория

Контентное изображение

Слово контент происходит от английского слова «content» — содержимое. С помощью таких изображений мы можем донести до пользователей полезную информацию. Чтобы добавить контентное изображение к себе на страницу, используйте в разметке <img>. Для изображений такого типа необходимо заполнять атрибут alt, который описывает то, что изображено на картинке.

Декоративное изображение

Из названия понятно, что этот тип изображений используется исключительно для оформления. Такие изображения не несут для пользователя полезной информации. Декоративные изображения следует реализовывать с помощью CSS.

Практика

В теории всё просто, но на деле мы можем столкнуться с неоднозначными ситуациями, в которых не так-то просто определить тип изображения. Давайте вместе рассмотрим различные ситуации на примерах.

Очевидные случаи

Изображение товара в карточке товара, контентное

Такие изображения содержат информацию о внешнем виде товара. Если они по какой-либо причине не отобразятся, то пользователь потеряет часть информации о товаре.

Реализация: <img>

Логотип, контентное

Логотипы могут быть реализованы как текстом, так и изображением, поэтому нужно ориентироваться на конкретный макет. В приведённых выше примерах логотип представлен изображением, которое содержит важную информацию о названии сайта.

И также часто встречаются блоки с партнёрскими логотипами. В таких ситуациях логотипы являются контентными изображениями.

Реализация: <img>

Изображения и текст, контентное

Примеры выше — изображения в статье. Данный случай ничем не отличается от карточки товара — у нас есть и описание, и изображение, несущие важную для пользователя информацию. Таким образом, изображение является контентным и должно быть сделано тегом <img>.

Реализация: <img>

Вспомогательная иконка, декоративное

В примере иконки в меню имеют декоративный характер. Если вдруг они пропадут, информация не потеряется, и пользователь всё равно сможет понять в какой раздел ему нужно. Для реализации лучше всего использовать background-image для псевдоэлемента.

Реализация: background-image для псевдоэлемента

Другой пример из того же магазина. Изображение лишь дополняет подпись. Такие изображения лишь поясняют названия и являются декоративными.

Реализация: background-image для всего блока или для псевдоэлемента

Фоновое изображение, декоративное

На примерах выше мы можем рассмотреть варианты декоративных фоновых изображений. Для реализации лучше всего подойдёт background-image для всего блока.

Реализация: background-image для всего блока

Спорные моменты

Изображение в промослайдере

В элементах слайдера нам часто встречаются изображения товаров. Они несут в себе важную визуальную информацию о товаре, поэтому в таком случае нам следует отнести их к контентному типу изображений.

Реализация: <img>

Однако, бывает и такое, что в слайдере изображения никак не относятся к тексту слайдов и служат только для декоративных целей, следовательно, относятся к декоративному типу изображений.

Реализация: background-image для всего блока

Карта с изображением

Под интерактивную карту принято добавлять изображение с картой, на случай если интерактивная карта не загрузилась. Каким же образом её добавлять? Карта несёт информацию об адресе. Например, в макете Девайс с нашего базового интенсива по HTML и CSS. В блоке «Контакты» только по карте можно понять адрес компании, ведь в тексте адрес не продублирован, а значит если изображение потеряется, пользователь потеряет информацию о местонахождении компании. Таким образом, изображения карт относятся к контентным изображениям.

Реализация: <img> (атрибут alt должен описывать изображение, в данном случае — Карта офиса по адресу улица Строителей, 15)

Иконки соцсетей

Кнопки с социальными сетями представляют собой более интересный случай. С одной стороны, они являются декоративными, так как являются частью интерфейса сайта, однако, если их картинки не загрузятся — информация всё же пропадёт (пользователь будет не способен понять к какой социальной сети относится каждая ссылка). Таким образом, здесь применяется комплексный подход: внутри ссылки обязательно прописывается поясняющий текст. Изображение на этих кнопках-ссылках декоративные. Для доступного скрытия текста ссылки необходимо добавить класс .visually-hidden. Описание этого паттерна скрытия можно почитать в нашей статье. Таким образом, при потере CSS-файла, изображение пропадёт, а текст ссылки появится. При нормальной работе сайта пользователь увидит лишь изображение. Также необходимо не забывать про доступность — так как в разметке мы прописываем текст ссылки, то при чтении сайта скринридером, ссылки будут озвучены.

Реализация: background-image для ссылки

Вывод

Вопрос определения типа изображения способен запутать неокрепший ум начинающего верстальщика, поэтому советуем вам каждый раз, когда вы сталкиваетесь с необходимостью определить тип изображения, обращать внимание на все детали, а не идти самым простым путём.

Что ещё знать о графике

• Форматы изображений для веба
• Как правильно написать alt-текст
• Фигма или Фотошоп. Что выбрать новичку

Контентные и декоративные изображения для сайта

При создании веб-сайта изображения играют роль первой скрипки — об этом вам скажет любой веб-дизайнер. В нашем блоге вы найдете множество статей о том, как создать эффективный СТА-элемент, как собрать идеальный слайдер или карусель на главную страницу сайта, как оптимизировать изображения для интернет-магазина без потери качества и много другое. Сегодня мы бы хотели рассказать вам о том, что такое декоративные и контентные изображения для сайта.

Контентные изображения

Контентные изображения (иногда их еще называют информативные) несут в себе определенную информацию. В интернет-магазине это могут быть фотографии товара, на корпоративном сайте — инфографика, иллюстрирующая развитие компании, динамику и т.д. Контентное изображение должно быть простым и понятным, таким, чтобы его смысл или концепцию можно было передать 1-2 словами. Иногда начинающие веб-дизайнеры путают контентное и декоративное изображение. Примеры ниже помогут устранить эту путаницу.

Пример 1: изображения, используемые для обозначения другой информации

В этом примере показаны изображения двух телефонов:

=========================================================================

Первое изображение относится к классу контентных, так как это изображение продаваемого товара. Глядя на эту картинку, покупатель может вынести определенную информацию: компания, которая произвела телефон, бренд, цвет и т.д. Второе изображение относится к разряду декоративных, так как оно не несет в себе никакой ценной информации для пользователя. Оно означает то, что означает — абстрактный телефонный аппарат.

Пример 2: изображения в слайдерах и каруселях на главное странице

Очень часто слайдеры и карусели на главное странице относят к декоративным изображениям. Однако это не всегда так. В примере ниже мы видим, что слайдер несет полезную для покупателя информацию о скидках. Поэтому оно автоматически становится контентным.

Если же слайдер сделан в качестве украшения сайта или для привлечения внимания посетителя, то он относится к разряду декоративных изображений.

Декоративные изображения

Декоративные изображения не добавляют информацию к содержанию страницы или текста, они украшают ее. Как правило, таким изображениям не задают описание и атрибуты alt, иначе при сканировании страницы веб-краулерами произойдет ошибка и дублирование информации. Достаточно вспомнить пример с двумя телефонами, приведенный выше. К декоративным изображениям в веб-дизайне можно отнести:

• Визуальные стили. Это всевозможные фоновые изображения, границы, заливки и т.д.;
• UI- kit (элементы пользовательского интерфейса: кнопки, флажки, списки и т.д.;
• Eye-candy. Красивые картинки, привлекающие взгляд человека, но не несущие никакой информации.

Очень часто декоративные изображения замедляют скорость загрузки страницы или веб-сайта в целом. Чтобы этого не случилось, используйте CSS или HTML. Так вы получите красивые изображения размером всего несколько сотен байт.

Декоративные изображения, специальные возможности и альтернативный текст

• Дизайн и разработка

Сеть — это пространство, богатое изображениями. Изображения, значки и иллюстрации повсеместно используются в веб-дизайне; вездесущ до такой степени, что можно легко забыть, что каждое отдельное размещение не предназначено для информирования. Если вы визуальный пользователь, вам, вероятно, будет легко впитать тон и присутствие изображения и связать его с контекстом того, что вы читаете. Эта ссылка не означает, что изображения информативны или необходимы.

В этом посте я расскажу, почему пометка изображения как декоративного важна для взаимодействия с пользователем и необходима для соблюдения требований, а также приведу некоторые рекомендации по определению того, является ли изображение декоративным, и как пометить его как таковое, чтобы соответствовать стандартам доступности изображений. .

Декоративные изображения и специальные возможности

Мне не нужно использовать программу чтения с экрана для передвижения. Но время от времени я буду использовать VoiceOver на своем Mac, чтобы копаться в сложных макетах или проверять свою работу. В результате я могу сопереживать любому, кто использует программу чтения с экрана для выполнения задач в Интернете. Изображениям может быть добавлен шум при попытке навигации по веб-сайту с помощью программы чтения с экрана. А ненужные изображения со всевозможным несуразным или отсутствующим текстом ALT только усложняют процесс.

Если изображение является просто украшением, независимо от того, насколько тщательно вы размышляете над ALT-текстом, оно будет выглядеть нелогичным при прочтении вслух программой чтения с экрана. В одном предложении вы можете говорить о рыночных условиях, а затем сразу после этого описывать фотографию женщины, которая ест банан и отчаянно смотрит на гистограмму. Вероятно, это не тот мост, который вы ожидаете построить от одного абзаца к другому.

Надлежащая разметка декоративного изображения также требуется для соответствия критериям WCAG 1.1.1. W3C определяет чистое украшение как «служащее только эстетической цели, не предоставляющее никакой информации и не имеющее никакой функциональности». Полные критерии доступны в разделе WCAG 1.1.1 — Нетекстовое содержимое в спецификации WCAG 2.0 9.0007

ALT = «»

Пометить изображение как декоративное довольно просто. Тем не менее, создание декоративного изображения может также сработать против многих лет работы с вашей стороны.

Вы должны всегда указывать атрибут ALT для изображения, но это не означает, что вы должны предоставлять описание. Чтобы пометить изображение как декоративное, достаточно указать пустой атрибут ALT.

Для этого просто введите ALT-текст «», чтобы указать пустой атрибут ALT. Это даст сигнал программе чтения с экрана пропустить изображение, исключив его из процесса чтения. Теперь важно отметить, что если вы вообще не укажете атрибут ALT, пользователь, скорее всего, услышит, как программа чтения с экрана произнесет полный путь и имя файла изображения.

ALT = «» является предпочтительным методом для маркировки декоративного изображения, и я рекомендую его как единственный подход, который вам нужен. Однако есть еще один способ пометить изображение как декоративное, который я хотел бы представить, чтобы вы знали, что делать, если столкнетесь с ним.

Роль = «Презентация»

Роль презентации, предоставляемая ARIA, может использоваться для скрытия элементов вспомогательных технологий, таких как программы чтения с экрана. Если вы хотите обеспечить дополнительный охват, вы можете использовать оба значения: Role = «presentation» и ALT = «» вместе; однако только в этой конфигурации.

Вы не можете пометить изображение ролью презентации, а затем предоставить описание через атрибут ALT. Эта комбинация была бы сродни тому, чтобы надеть костюм клоуна на свадьбу и попросить всех не смотреть на вас.

Роль = «представление» в целом является избыточным для изображения, но его правильное использование не имеет недостатков.

Примеры декоративных изображений

Теперь вы знаете, как помечать изображения как декоративные. Далее поговорим о том, как распознать разницу между декоративным изображением и поучительным. Следующие примеры, которые у меня есть для вас, я нахожу очень распространенными в работе маркетологов. Всегда есть место для дружеского обсуждения семантики, поэтому вы можете использовать эти правила в качестве основы для принятия решений.

Значки рядом с текстом

Прежде чем мы углубимся в это, позвольте мне сразу же противоречить самому себе… В этом примере нет места спорам. Значки рядом с текстом носят декоративный характер. Период.

• Значок птицы Twitter рядом со ссылкой с надписью «Подпишитесь на нас в Twitter»? Декоративный.
• Значок увеличительного стекла рядом с полем «Поиск»? Декоративный.
• Значок интеробанга рядом с подстрекательским заголовком? В любом случае, большинство людей не знают, что это такое… декоративное.

Довольно просто. Как правило, значок рядом с текстом является декоративным.

Stock Photo / Flavor / Flair

Поместить какую-нибудь причудливую фотографию человека, лежащего мертвым из-за подавляющего экзистенциального кризиса, в верхнюю часть вашего следующего поста в блоге о балансе между работой и личной жизнью? Если вы это сделаете, вполне возможно, что изображение предназначено только для украшения.

Изображения, подобные этому, часто используются в самом начале или разбросаны по всему длинному контенту. Если вы знакомы с WordPress, «Избранное изображение» (миниатюра сообщения), как правило, также относится к этому стилю изображения. Мы используем такие изображения, чтобы создать настроение или предложить более глубокий контекст. И если вы похожи на меня, вы используете это как способ представить визуальный каламбур, который не будет иметь смысла до тех пор, пока спустя несколько часов.

Чтобы продолжить пример сообщения в блоге о балансе между работой и личной жизнью, я ожидаю, что такая статья предоставит тактику о том, как , а не , истечь из упомянутого экзистенциального страха. Это означает, что изображение может создавать настроение для пользователей, которые могут его видеть — например, изображение смерти, проверяющей список дел, — однако, если это изображение полностью удалить, его содержание и его значение останутся неизменными и останутся полностью понятными. .

Независимо от намерения, стоковое изображение, используемое для вкуса, не должно быть необходимым для понимания вашего контента. Если это так, я рекомендую переместить этот контекст в ваш текст и просто использовать изображение, чтобы улучшить ситуацию для визуальных пользователей. Дайте ему обработку ALT = «».

Иллюстрации

Мое объяснение иллюстраций аналогично описанию стоковой фотографии из предыдущего раздела. Обычно к иллюстрации примыкают небольшие блоки текста, которые могут обеспечить дополнительный контекст. Например, представьте веб-сайт банка, на котором есть описание финансовой услуги со стилизованной монетой слева или справа от текста. Изображение денег может соответствовать региону (используя евро вместо копейки) и включать рекомендации по стилю бренда. В данном случае монета декоративная; сам по себе он не описывает содержимое рядом с ним, и содержание не должно быть менее понятным, если его удалить.

В заключение

Не каждая картинка стоит тысячи слов. Многие изображения, из которых состоят веб-страницы, просто радуют глаз: кусочки линий и цвета, которые придают ритм или интерес тому, что в остальном является текстовым документом. Если вам трудно решить, является ли изображение декоративным или информативным, прочитайте свою страницу или статью вслух другому человеку. Если они могут понять, что вы говорите, не описывая изображения, вы можете быть уверены, что они декоративны.

Список примеров в этом сообщении блога не является исчерпывающим; Тема декоративных и информативных изображений для веб-сайтов обширна. Но, надеюсь, предоставленная информация может дать вам четкое понимание для начала. Если вам интересно узнать больше о доступности в Интернете, вы можете ознакомиться с нашим Руководством по специальным возможностям для цифрового маркетолога.

Дайте мне больше

Получите ценный, всесторонний и стратегический совет. Подпишитесь, чтобы получать наши публикации по электронной почте!

Специальные возможности Значимые и декоративные изображения

❮ Предыдущий Далее ❯

Почему

Программы чтения с экрана игнорируют декоративные изображения. Программы чтения с экрана попытаются передать смысл осмысленного изображения.

What

Некоторые изображения имеют смысл, а некоторые — декоративные. Это важное различие с точки зрения доступности. Каждое изображение должно быть закодировано как значимое или декоративное.

Как

Вы научитесь отделять смысловые изображения от декоративных.

Декоративные изображения

Если изображение не важно для понимания пользователем функциональности или содержания веб-страницы или приложения, оно считается декоративным. Можете ли вы удалить его без последствий? Тогда это декоративный образ.

Пустой атрибут alt

Основной способ сделать изображение декоративным — использовать пустой атрибут alt .

На первой странице Alibaba у нас есть четыре ярлыка — Все категории , Запрос котировок , Онлайн-выставка и Средства индивидуальной защиты . Каждый имеет иллюстративный значок. Ярлык Все категории имеет изображение, показывающее три темно-синих квадрата и оранжевый кружок. Это изображение является декоративным изображением. Мы устанавливаем это, добавляя пустой атрибут alt :

Вспомогательные технологии , как программа чтения с экрана, затем проигнорирует изображение. Без пустого alt , программа чтения с экрана может прочитать имя файла. Это не будет иметь смысла и запутает пользователя.

Фоновые изображения

Другой способ добавления декоративных изображений — добавление их с помощью свойства CSS background-image. Это обычное дело, когда мы создаем главные образы.

Значки шрифтов

В нижней части мобильной версии Alibaba у нас есть пять ссылок, которые представляют собой комбинации значков и текста — Главная , Каналы , Messenger , Корзина и Моя Алибаба . Поскольку сайт остается читаемым, если убрать иконки, они декоративные. Значки создаются с помощью значков шрифтов. Нет элемента и фонового изображения. Добавьте role="img" и aria-hidden="true" :

С помощью этого кода мы добавляем некоторая семантика с ролью изображения. Пользовательские агенты теперь понимают, что это изображение. Программа чтения с экрана также понимает, что изображение следует игнорировать.

Встроенные изображения SVG

Если вы добавляете декоративное изображение SVG с элементом , вы должны добавить пустой атрибут alt, как описано. Изображения SVG часто вставляются в строку с помощью элемента . В этом случае aria-hidden="true" сделает ваше изображение декоративным.

Значимые изображения

Большинство наших изображений имеют смысл. В этом примере от Alibaba у нас есть шесть изображений:

• Логотип
• Значок поиска
• Кофе
• Куртка
• 1 год значок
• Золотой значок

Единственным декоративным изображением здесь является значок поиска. Это декоративный элемент из-за текста Search Products . Если бы иконка для открытого поиска была отдельной, это было бы осмысленное изображение.

Как и в случае с декоративными изображениями, у нас есть несколько методов кодирования смысловых изображений.

Описательный атрибут alt

Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть. Причиной может быть медленное соединение, ошибка с файлом изображения или использование пользователем программы чтения с экрана. Значение атрибута alt должно описывать изображение или даже лучше: намерение изображения. Вы узнаете, что писать на странице Описательные тексты для изображений.

В этом примере от Alibaba логотип присутствует по двум причинам. Прежде всего, чтобы сообщить пользователям, на каком сайте они находятся. Во-вторых, предоставить пользователям ссылку на главную страницу.

Недоступно:

Лучше, но все равно плохо:

Лучше:

Лучшее:

Фоновые изображения, значки шрифтов и