Java, UX, HTML, CSS, WEB-design

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


  • Эрик Бейли

  • 0 Комментарии

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

  • 6 минут чтения

  • CSS, изображения, удобство использования, доступность

Краткое резюме ↬

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

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

  <img alt="" src="https://www.smashingmagazine.com/images/cat.jpg" />
Это изображение было обнулено.
  <img alt=" " src="https://www.smashingmagazine.com/images/dog.jpg" />
Это изображение не было обнулено.

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

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

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

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

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

<a href="https://www.smashingmagazine.com/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="https://www.smashingmagazine.com/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, который был растянут до разных размеров, чтобы разместить содержимое на месте.

Три растянутых файла spacer.gif используются для создания внешнего поля для текста «Добро пожаловать на мою домашнюю страницу».

Три растянутых файла spacer.gif используются для создания внешнего поля для текста «Добро пожаловать на мою домашнюю страницу». (Большой превью)

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

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

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

Текст: «Техника 9-фрагментного масштабирования использует повторяющиеся фоновые изображения для контента с гибкой шириной или высотой».  окруженный столбцами и строками для каждой из его четырех сторон.  В каждом из четырех углов квадратная площадка.  В квадратных областях, столбцах и строках расположены общие значки изображений.  Значок изображения повторяется в столбцах и строках, демонстрируя, как можно замостить текстуру.

Техника 9-фрагментного масштабирования (Большой предварительный просмотр)

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

Еще после прыжка! Продолжить чтение ниже ↓

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

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

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

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

<button type="button">
  <img src="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="" />
  Print
</button>

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

<button type="button">
  <img src="https://www.smashingmagazine.com/2021/06/img-alt-attribute-alternate-description-decorative/icon-print.svg" alt="Print." />
</button>

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

Я понятия не имею, что делает эта кнопка.

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

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

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

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

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

То picture Элемент

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

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

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

См. перо [Background Image As Foreground Image Example](https://codepen.io/smashingmag/pen/OJprPwK) Эрика Бейли.

См. пример фонового изображения пера в качестве изображения переднего плана Эрика Бейли.

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

Встроенный SVG

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

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

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

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

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

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

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

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




Source: https://smashingmagazine.com

Заключение

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

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

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

Название: Ваше изображение, вероятно, не является декоративным . Краткое описание: ⭐ Эрик Бейли . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»