Ваше изображение не декоративно

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

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

<img alt="" src="/images/cat.jpg" />
<!--это изображение обнулено-->

<img alt=" " src="/images/cat.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-slice scaling),термин, который относится к 9 разделам контента, которые вам необходимо было создать.

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

Лишнее объявление изображений

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

Дополнительные иконки

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

<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 не имеет явной роли, это значит что его присутствие не говорит нам о какой-либо цели. Это означает, что его нельзя использовать для семантического описания картинки.

<a href="/product/9091866/color/3">
  <picture>
    <source 
      srcset="9091866-3.avif" 
      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, гарантирует, что содержимое неизвестного размера будет отображаться без нарушения.

Встроенный SVG

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

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