Возможно, ваше изображение не является декоративным — Smashing Magazine
- 6 мин чтения
- CSS, Изображений, Удобство использования, Доступность
- Поделиться в Twitter, LinkedIn
Об авторе
Эрик — дизайнер из Бостона, который помогает создавать простые решения, отвечающие практическим, физическим, когнитивным и эмоциональным потребностям человека. Больше о Эрик ↬
Изображение в современном Интернете размещается намеренно, помогая передать общую цель страницы или представления. Это означает, что почти каждое изображение, которое вы объявляете, должно иметь альтернативное описание. Атрибут alt элемента img может быть «обнулен», что означает установку для него пустой строки вместо текстового описания. Обнуление альтернативного описания означает, что между открывающей и закрывающей кавычками нет информации. Если есть пустое место, оно не будет считаться нулевым:
Это изображение обнулено.jpg" />
Это изображение не было обнулено.
Что означает слово «декоративный»?
Обнуление изображения означает, что оно предназначено только для декоративных целей.
В этом контексте декоративность означает, что изображение визуально не передает информацию , которая важна для понимания цели страницы или представления и того, почему изображение включено как его часть.
«Декоративный» не означает, что изображение содержит содержимое, которое считается украшением.
Например, веб-сайт, продающий обои, захочет иметь альтернативные описания для образцов обоев:
<изображение alt="Маленькие красно-белые иллюстрированные зонтики на бирюзовом фоне." src="/images/738483051.png" />
Другим примером может быть веб-сайт музея, где представление предмета из его коллекции может быть выгодным как с альтернативным описанием, так и с подписью:
<рисунок роль = "фигура" aria-label="Вид на Роттердам, автор Корнелис Буместер.Дата: около 1700–1720 гг. Номер доступа: 2005.1057. В голландских домах плитка обычно служила утилитарным целям, таким как покрытие стен кухонь, подсобных помещений, проходов и камина. окружает."> <изображение alt="Картина из плитки, состоящая из 33 делфтских плиток, образующих вид на порт Роттердама. В современной раме из красного дерева с позолоченной надписью по нижней границе." источник = "/коллекция/w0895/2005-1057.png" />
Вид на Роттердам, Корнелис Бумистер. Дата: около 1700–1720 гг. Регистрационный номер: 2005.1057. В голландских домах плитка обычно служила утилитарным целям, таким как покрытие стен кухонь, подсобных помещений, проходов и каминов.
Убедитесь, что ваше альтернативное описание также включает пунктуацию!
Зачем делать изображение декоративным?
Вспомогательная технология пропускает обнуленные изображения и не сообщает об их наличии. Причины желания сделать это в основном исторические.
Старые методы компоновки
Ранние методы веб-разработки основывались на изображениях, чтобы гарантировать согласованность компоновки в различных операционных системах, браузерах и версиях браузеров. Наиболее распространенным примером этого был spacer.gif , прозрачный пиксель размером 1×1, который растягивался до разных размеров, чтобы разместить содержимое на месте.
Этот метод обычно использует много интервал между изображениями для создания визуального оформления. Без возможности заглушить их присутствие эти изображения загромождали бы то, о чем объявляют вспомогательные технологии, и затрудняли бы навигацию и выполнение действий с веб-контентом.
Старые методы проектирования
До того, как появились свойства CSS, такие как box-shadow , разработчикам приходилось использовать методы, которые нарезали декоративные стили, чтобы заставить их работать с содержимым неопределенной высоты или ширины.
Эта техника получила название 9масштабирование фрагментов, термин, который относится к 9 разделам контента, которые вам нужно будет создать.
Как и в случае изображений-разделителей, 9-фрагментное масштабирование использует несколько изображений для создания желаемого визуального эффекта. И, как и в случае с распорными изображениями, единственный способ устранить беспорядок, созданный этими изображениями, — пометить их как декоративные.
Больше после прыжка! Продолжить чтение ниже ↓
Избыточные объявления
Существует редкий сценарий, когда изображение повторяется на странице или в представлении, и его повторные размещения не предоставляют никакого дополнительного контекста. Вы должны быть осторожны с пометкой изображения как декоративного в этой ситуации, так как отсутствие объявления для видимого изображения может сбить с толку человека со слабым зрением, использующего программу чтения с экрана.
Ссылки и кнопки, использующие значки, всегда должны иметь доступное имя, сообщающее о функциональности. Если дизайн также включает значок, дизайн значка не нужно сообщать.
<тип кнопки="кнопка">Распечатать
Если компонент использует только значок, само изображение должно использоваться для создания доступного имени:
Обратите внимание, что предпочтительнее использовать видимую текстовую метку. Видимая текстовая метка может быть переведена и более прямо передает цель.
Я понятия не имею, что делает эта кнопка.Современное использование
Современные методы компоновки и стилей CSS означают, что размещение изображений теперь является преднамеренным. Это означает, что если изображение используется, ему, скорее всего, потребуется альтернативное описание.
Альтернативные описания должны сообщать о назначении изображения .
Это включает в себя содержание изображения, но может также включать причину, по которой оно включено в контекст страницы или представления, в которое оно было включено. Это одна из причин, по которой альтернативные описания изображений никогда не смогут быть полностью автоматизированы.
Другие способы отображения изображений
Существует несколько других способов отображения изображения на странице или в представлении. Важно обеспечить альтернативное описание, если изображение содержит осмысленный контент — независимо от используемого метода.
Рисунок
Элемент Элемент picture не играет неявной роли, т. е. его присутствие не сообщает о какой-либо цели вспомогательным технологиям. Это означает, что его нельзя использовать для семантического описания присутствия «изображения».
Элемент picture представляет собой контейнер для элементов source
img . Используйте атрибут alt элемента img , чтобы предоставить альтернативное описание родительского элемента картинка элемент.
<картинка> <источник srcset="9091866-3.avif" тип = "изображение/авиф" /> <изображение alt="Черные сапоги до щиколотки с металлическими люверсами, желтой строчкой, мягким воротником и язычком." src="9091866-3.png" />
Фоновые изображения
Мы можем использовать CSS, чтобы объявить изображение фоном HTML-элемента. Это чаще всего используется для добавления ощущения текстуры в дизайн.
Однако другой популярный метод заключается в использовании фонового изображения для размещения изображения таким образом, что разработчик не может контролировать размер изображения , которое кто-то загружает. background-image в сочетании с другими свойствами, такими как background-size , гарантирует, что содержимое неизвестного размера отображается без нарушения дизайна.
См.
Pen [Фоновое изображение как пример изображения переднего плана] (https://codepen.io/smashingmag/pen/OJprPwK) Эрика Бейли.
В таком сценарии наш старый друг spacer.gif снова может быть полезен!
Встроенный SVG
SVG можно отобразить либо путем ссылки на него через атрибут src в элементе
Если вы используете встроенный SVG, вам нужно использовать элемент SVG title (и потенциально desc ) вместо 9Атрибут 0015 alt .
Эквивалентный опыт
В современном веб-дизайне и разработке отображение изображения является очень преднамеренным действием.
Альтернативные описания позволяют нам объяснить содержание изображения, и при этом сообщите, почему стоит включить .
То, что на изображении изображено что-то причудливое, не означает, что его не стоит описывать. Объявление о его присутствии гарантирует, что любой, независимо от способностей или обстоятельств, сможет полностью понять ваш цифровой опыт.
Дополнительная литература на SmashingMag:
- Специальные возможности в Chrome DevTools
- Полное руководство по инструментам специальных возможностей
- Доступные изображения, когда они наиболее важны
- Доступные SVG: идеальные шаблоны для пользователей программ чтения с экрана
- Дизайн с уменьшенным движением для чувствительности к движению
- Прочтите другие статьи о специальных возможностях, удобстве использования и UX.
HTML Bulletproof Фоновые изображения в сообщениях электронной почты
Включает все исправления для фоновых изображений, охватывающие учетную запись Outlook, Windows 10, Webkit и Gmail, отличную от учетной записи Gmail (GANGA).
В Action Rocket мы в курсе всех последних взломов и исправлений, чтобы наши клиенты получали самые лучшие электронные письма. Фоновые изображения могут создать отличные эффекты в дизайне электронной почты и действительно оживить его.
Однако они вызывают некоторую головную боль — Outlook 2007, 2010, 2013 нуждаются в языке векторной разметки (VML) для правильного отображения изображения, поскольку они используют механизм рендеринга Microsoft Word. Windows 10 также имеет аналогичные особенности, но требует даже больше информации, чем более ранние версии, в основном ширина и высота указываются в точках (pt), а не в пикселях. Электронная почта Webkit и подавляющее большинство современных почтовых клиентов могут использовать обычный фон CSS или html, и совсем недавно Джастин Ху из freshinbox обнаружил, что другой почтовый клиент, который до последнего месяца или около того не поддерживал фоновые изображения, приложение Gmail не поддерживает Учетные записи Gmail, исправление для этого было свойством фона css, но со значениями свойств, установленными в сокращении.
Ознакомьтесь со всем приведенным ниже кодом — в нем охвачены все экземпляры, где теперь поддерживаются фоновые изображения:
| CONTENT |
Разбивка
| style=»background: url(‘https://via.placeholder.com/640×400’) center/cover no-repeat #000000;» Во-первых, background: url(‘image.png’) ссылается на изображение, которое является повторением изображения выше, указанного в html. Затем следует положение изображения — центр / размер — обложка, должно ли изображение повторяться — без повторов и, наконец, цвет фона #000000; Все они настроены для централизации фонового изображения, которое достаточно велико, чтобы покрыть контент и не требует повторения. Нам не нужно было экспериментировать с другими значениями свойств фона CSS, но есть еще несколько. Дайте нам знать, если вы делаете и как вы поживаете! После | запускаем VML: Открывающие и закрывающие условные комментарии MSO гарантируют, что VML применяется только к тем версиям Outlook, которые в нем нуждаются. VML За которым следует v:image, определяющий изображение в VML. Мы определяем пространство имен xml xmlns:v=”urn:schemas-microsoft-com:vml”, затем мы определяем значения свойства v:image, заполнение используется для определения атрибутов, кроме сплошного цвета или изображения. используется. fill=»true» указывает, что изображение vml заполнит всю фигуру. Обводка используется для определения того, используется ли линия или граница, в случае фонового изображения это не так, поэтому для этого параметра установлено значение stroke=»false». Затем за этими атрибутами VML следует тег стиля, который, что наиболее важно, содержит размеры изображения в виде точек, чтобы получить правильное число, умножив пиксели на 0,75, например. 640 пикселей x 0,75 = 480 пикселей. И последнее, но не менее важное: изображение src. Вслед за v:image мы «рисуем прямоугольник того же размера, что и изображение — v:rect со схожими атрибутами. Далее в VML идет v:fill для установки цвета и непрозрачности v:rect и v:image – этот цвет нужен задавать так же, как в bgcolor и background:color; чтобы он был одинаковым для всех клиентов. Наконец, мы определяем положение v:textbox, чтобы показать, что мы будем помещать что-то поверх вышеуказанных v:rect и v:image с позицией, начинающейся с верхний левый на 0,0,0,0. После VML — открываем , содержащий изображение и vml. Затем следует , чтобы остановить появление пробела в 20 пикселей после изображения в Outlook. Поскольку последним тегом таблицы html, который мы использовали, был , нам нужно использовать здесь правильный синтаксис и либо заполнить | , либо создать новый |
Затем следуют закрывающие теги для всего вышеперечисленного, включая теги VML, закрытые внутри условного тега MSO.  |
Здесь нет ничего нового.
placeholder.com/640×400″ />
Основное отличие — это position:absolute; чтобы разместить прямоугольник там, где он нам нужен.