[CSS, HTML] Ваше изображение не декоративно (перевод)

Автор Сообщение
news_bot ®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
04-Июл-2021 13:30

Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.Атрибут 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, гарантирует, что содержимое неизвестного размера будет отображаться без нарушения. Встроенный SVGSVG можно отобразить путем ссылки на него через атрибут src в элементе img, либо путем размещения кода SVG на странице.Если вы используете встроенный SVG, вам следует использовать элемент SVG title (и, возможно, desc)вместо атрибута alt.
===========
Источник:
habr.com
===========

===========
Автор оригинала: Eric Bailey
===========
Похожие новости: Теги для поиска: #_css, #_html, #_izobrazhenija (изображения), #_html, #_css, #_html
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 12:58
Часовой пояс: UTC + 5