Ваше изображение, вероятно, не является декоративным

Атрибут alt элемента img можно «обнулить», то есть установить для него пустую строку вместо текстового описания. Обнуление альтернативного описания означает, что между открывающей и закрывающей кавычками нет информации. Если есть пустое место, оно не будет считаться нулевым:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

Что означает слово «декоративный»?

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

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

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

“

Например, веб-сайт, продающий обои, захочет иметь альтернативные описания образцов обоев:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Другим примером может быть веб-сайт музея, где представление предмета из их коллекции может быть полезно как с альтернативным описанием, так и с подписью:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Убедитесь, что ваше альтернативное описание также включает знаки препинания!

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

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

Старые методы компоновки

Ранние методы веб-разработки полагались на изображения, чтобы гарантировать единообразие макета в разных операционных системах, браузерах и версиях браузеров. Наиболее распространенным примером этого был spacer.gif , прозрачный пиксель размером 1×1, который растягивался до разных размеров, чтобы разместить содержимое на месте.

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

Старые методы проектирования

До того, как появились свойства CSS, такие как box-shadow , разработчикам приходилось использовать методы, которые нарезали декоративные стили, чтобы заставить их работать с содержимым неопределенной высоты или ширины. Этот метод назывался 9-фрагментным масштабированием, термин, который относится к 9 разделам контента, которые вам нужно будет создать.

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

Избыточные объявления

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

Дополнительные значки

Ссылки и кнопки, использующие значки, всегда должны иметь доступное имя, сообщающее о функциональности. Если дизайн также включает значок, дизайн значка не нужно сообщать.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Если компонент использует только значок, само изображение должно использоваться для создания доступного имени:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

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

Современное использование

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

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

Другие способы отображения изображений

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

Элемент picture

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

Элемент picture является контейнером для элементов source и img . Используйте атрибут alt элемента img , чтобы указать альтернативное описание родительского элемента picture .

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

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

Мы можем использовать CSS, чтобы объявить изображение фоном HTML-элемента. Это чаще всего используется для добавления ощущения текстуры в дизайн.

Тем не менее, другой популярный метод заключается в использовании background-image для размещения изображения таким образом, что разработчик не может контролировать размер изображения, которое кто-либо загружает. background-image в сочетании с другими свойствами, такими как background-size , гарантирует, что содержимое неизвестного размера будет отображаться без нарушения дизайна.

В подобном сценарии наш старый друг spacer.gif может снова оказаться полезным!

Встроенный SVG

SVG можно отобразить либо путем ссылки на него через атрибут src в элементе img , либо путем размещения кода SVG на странице или в представлении.

Если вы используете встроенный SVG, вам нужно использовать элемент title SVG (и, возможно, desc ) вместо атрибута alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Эквивалентный опыт

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

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

Дальнейшее чтение на SmashingMag:

• Доступность в Chrome DevTools
• Полное руководство по инструментам доступности
• Доступные изображения, когда они важнее всего
• Доступные SVG: идеальные шаблоны для пользователей программ чтения с экрана
• Проектирование с уменьшенным движением для чувствительности к движению
• Читайте другие статьи о доступности, удобстве использования и UX.